Cannot drag elements in an Iframe

Question

I have a page with an iframe to a another page with two columns, where you can drag an element from the first column to the second. The code I have for the iFrame is simple

 <div style="width: 1000px; ">
  <iframe id="isurvey" frameborder="0" style="width: 102%; height:1000px" src="https://www.thriveonsoftware.com/test.php" onload="window.parent.parent.scrollTo(0,0)">
</div>
 </div>

If you go to bottom of the first column by scrolling (which is out of the viewport) you cannot drag the element from the first column to the second. This is easiest to see by going here:

http://codepen.io/amweiss98/pen/OXBqGy

Just scroll down to the option called "Public Relations" or "HTML" and then try to drag that to the second column...you won't be able to.

This seems like a common problem for long lists.

Does anybody have a solution for this?

Answer 1

The dragging works fine, the issue is the height of the second div #sortable2.

http://codepen.io/amweiss98/pen/OXBqGy

If you click + hold on 'HTML', and then scroll back to the top, you can drop the box into the second div fine. This is because the second div has;

min-height: 60px;

If you want to be able to drag anywhere to the right, you need to make sure that #sortable2 is actually there i.e. #sortable2 should be the same height as #sortable1.