我试图在父框架和子框架之间实现jQuery Draggable | Droppable | Sortable.
我有一个这样的原型,但有一些奇怪的行为发生
我有一个这样的原型,但有一些奇怪的行为发生
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');} });
iframe页面还包含
$("#sortable").sortable();
这是jsfiddle http://jsfiddle.net/vxAzs/5/
当我尝试将元素放在iframe上时,它工作正常,但是当我尝试对iframe上的元素进行排序时,元素会粘到我认为的两个页面的click事件上(所以在我点击两个父项之前它不会被删除和iframe).我认为这与父和iframe中的.sortable()调用有关,但如果我删除了droppable停止工作.
解决方法
好的,这就是我这样做的方式..
要从父框架创建对元素的拖动并将其放在iframe中的可排序列表中,
我在iframe内部创建了父框架元素的draggable
要从父框架创建对元素的拖动并将其放在iframe中的可排序列表中,
我在iframe内部创建了父框架元素的draggable
win = document.getElementById('<identifier for Iframe>').contentWindow; win.jQuery(dragelement,parent.document).draggable({ connectToSortable : $("#sortable") )}
奇迹般有效!