javascript - Jquery Sortable and Draggable between parent and child frame

Question

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.net/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.

Answer 1

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!