I am trying to implement jQuery Draggable|Droppable|Sortable between a parent and child frame. I have a this prototype but there is some weird behavior happening

win = document.getElementById('frame').contentWindow;

element = win.document.getElementById('sortable');
$(element).sortable();
console.log(element);
$( "#draggable" ).draggable({
      connectToSortable: $(element),
     iframefix: true,
    helper: function() {return $("<div/>").css('background-color','red');}
});

The iframe page also contains

$("#sortable").sortable();

Here is the jsfiddle /

It works fine when I try to drop the element on the iframe but when I try to sort the elements on the iframe the element sticks to the click event of both pages I think (so it doesn't get dropped until I click on both parent and iframes). I think it is something to do with the .sortable() call in both parent and iframe but if I remove that the droppable stops working.

I am trying to implement jQuery Draggable|Droppable|Sortable between a parent and child frame. I have a this prototype but there is some weird behavior happening

win = document.getElementById('frame').contentWindow;

element = win.document.getElementById('sortable');
$(element).sortable();
console.log(element);
$( "#draggable" ).draggable({
      connectToSortable: $(element),
     iframefix: true,
    helper: function() {return $("<div/>").css('background-color','red');}
});

The iframe page also contains

$("#sortable").sortable();

Here is the jsfiddle http://jsfiddle/vxAzs/5/

It works fine when I try to drop the element on the iframe but when I try to sort the elements on the iframe the element sticks to the click event of both pages I think (so it doesn't get dropped until I click on both parent and iframes). I think it is something to do with the .sortable() call in both parent and iframe but if I remove that the droppable stops working.

• javascript
• jquery
• jquery-ui
• jquery-ui-sortable
• jquery-ui-draggable

Share Improve this question Follow edited Feb 19, 2013 at 5:51 Kshitiz asked Feb 18, 2013 at 1:27 KshitizKshitiz 2,98066 gold badges3535 silver badges4242 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

ok, here is how I am doing this one.. To create Drag on an element from parent frame and drop it in a sortable list in the iframe, I created draggable on the element of parent frame from inside the iframe

win = document.getElementById('<identifier for Iframe>').contentWindow;
win.jQuery(dragelement,parent.document).draggable({
connectToSortable : $("#sortable")
)}

Works like a charm!

ment this line in your code,

//$(element).sortable({iframefix:true});

here is the fiddle : link

iframeFix is case sensitive: Change

iframefix: true,

to

iframeFix: true,