Question

我正在尝试在父框架和子框架之间实现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就会停止工作。

Answer 1

好的，这就是我这样做的方式.. 要从父框架创建对元素的拖动并将其放在iframe中的可排序列表中，我在iframe内部的父框架元素上创建了draggable

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

像魅力一样！

Answer 2

在您的代码中注释这一行，

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

这里是小提琴：link

Answer 3

iframeFix区分大小写：变化

iframefix: true,

到

iframeFix: true,

Jquery可在父框架和子框架之间进行排序和拖拽

3 个答案: