问题
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.
回答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!
回答2:
comment this line in your code,
//$(element).sortable({iframefix:true});
here is the fiddle : link
回答3:
iframeFix is case sensitive: Change
iframefix: true,
to
iframeFix: true,
来源:https://stackoverflow.com/questions/14928210/jquery-sortable-and-draggable-between-parent-and-child-frame