父子框架之间的Jquery可排序和可拖动答案

【问题标题】：Jquery Sortable and Draggable between parent and child frame父子框架之间的Jquery可排序和可拖动
【发布时间】：2013-02-02 09:44:39
【问题描述】：

我正在尝试在父框架和子框架之间实现 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 上的元素进行排序时，元素会坚持我认为的两个页面的点击事件（所以在我点击之前它不会被丢弃在父框架和 iframe 上）。我认为这与父级和 iframe 中的 .sortable() 调用有关，但如果我删除 droppable 停止工作。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案1】：

好的，这就是我的做法。要在父框架中的元素上创建拖动并将其拖放到 iframe 中的可排序列表中，我从 iframe 内部在父框架的元素上创建了可拖动

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

像魅力一样工作！

【讨论】：

它给了我这个错误.. Uncaught TypeError: Object [object global] has no method 'jQuery' 。请帮助我你是如何解决这个问题的。
jquery 加在两边。我正在使用 jquery 1.8。
这里是小提琴链接。这给出了错误jsfiddle.net/vaibhav1407/VteaR/1
谢谢，根据你的代码，我写了一个成功的demo（修复了一些错误），可能对其他人有帮助：fiddle.jshell.net/vxAzs/137/show（必须在预览页面测试，否则会显示js SecurityError）

【解决方案2】：

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

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

这里是小提琴：link

【讨论】：

如果我这样做，那么元素不会与可排序列表连接

【解决方案3】：

iframeFix 区分大小写：改变

iframefix: true,

到

iframeFix: true,

【讨论】：