Invalid mouse offset for cross frame drag + sort

Question

We are currently trying to perform drag and drop between frames between dragged and sorted files provided by jQuery UI. Now it works correctly. However, the mouse shift seems to be turned off when dragging from the parent to the child frame - see this script: http://jsfiddle.net/r5nfe/6/ .

Parent Code:

$('#my-frame').load(function () { $('.draggable').draggable({ appendTo: 'body', helper: 'clone', iframeFix: true, revert: 'invalid', connectToSortable: $('#my-frame').contents().find('.sortable'), cursorAt: { top: 0, left: 0 } }); $('#my-frame').contents().find('.sortable').sortable({ iframeFix: true, cursorAt: { top: 0, left: 0 } }); }); 

Code in child frame:

 var containers = $('.sortable'); containers.sortable({ connectWith: containers, cursor: 'move', revert: true, cursorAt: { top: 0, left: 0 } }); 

Can someone tell us how to fix mouse displacement?

Answer 1

solution 2 update

I added this js function because when you add too many draggable element to the iframe, drag and drop elements may overlap with sortable elements if you scroll down

 $('.draggable').on('dragstop',autoResize); function autoResize(){ var newheight; if(document.getElementById){ newheight=document.getElementById('my-frame').contentWindow.document .body.scrollHeight; } newheight=newheight+100; $('#my-frame').css('height',newheight); } 

here is the new jsfiddle
final decision 2 update

This problem seems to be a mistake, and someone made their solution (basically a workaround): trasparent div solution

1 My first solution, without changing the code, could put an iframe before the material being dragged, as shown here , the code:

 <iframe id="my-frame" src="/VqxGf/3/show"></iframe> <ul> <li class="draggable">Drag me</li> <li class="draggable">Drag me 2</li> <li class="draggable">Drag me 3</li> </ul> 

2 Another solution that seems to work is to play with the style: position absolute property for ul, which contains draggable

s, margin-top bit for the material to be sorted in the frame, and possibly frameborder = 0, jsfiddle Main page:

 <ul style="position:absolute"> <li class="draggable">Drag me</li> <li class="draggable">Drag me 2</li> <li class="draggable">Drag me 3</li> </ul> <iframe frameborder="0" id="my-frame" src="/ATu6F/30/show"></iframe> 

Iframe page:

 <ul id="sortable" style="margin-top:100px" class="sortable idle"> <li>Sortable</li> <li>Sortable 2</li> <li>Sortable 3</li> </ul> <ul id="sortable2" class="sortable idle"> <li>Sortable</li> <li>Sortable 2</li> <li>Sortable 3</li> </ul> 

Hope this helps.

Refer to edit at the beginning of this post.

Answer 2

I tried this for my part. But this does not work perfectly.

I change appendTo to parent.body and cursorAt with 100 on the top parameter.

 $('#my-frame').load(function () { $('.draggable').draggable({ appendTo: 'parent.body', helper: 'clone', iframeFix: true, revert: 'invalid', connectToSortable: $('#my-frame').contents().find('.sortable'), cursorAt: { top: 100, left: 0 } }); $('#my-frame').contents().find('.sortable').sortable({ iframeFix: true, cursorAt: { top: 0, left: 0 } }); });