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 $("

").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.

Accepted Answer

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!

Jquery Sortable and Draggable between parent and child frame

Solution

Problem