jQuery-ui可以在iframe中进行排序

我在主框架中有droppable放置的元素，并且sortable在iframe app中进行sortable 。 我需要的是连接它们 – 能够将项目拖动到iframe的sortable

有我做过的： http ： //jsfiddle.net/w9L3eorx/1/

我有iframe里面

 
 
Foo
 
Bar
 
  $('.content').sortable({ iframeFix: true, placeholder: 'block-placeholder', update: function (event, ui) { // turn the dragged item into a "block" ui.item.addClass('block'); } });  

主框架

 
 
One
 
Two
 
   $('.items div').draggable({ helper: function(e) { return $('
').addClass('block').text( $(e.target).text() ); }, iframeFix: true, connectToSortable: $('.content', $("#frame")[0].contentDocument) });  

我看到了工作示例http://ma.rkusa.st/zepto-dnd/example.html 。 但它是在没有jquery的情况下构建的，并且不适用于IE9

Answer 1

干得好：

  $('.items div').draggable({ helper: function(e) { return $('
').addClass('block').text( $(e.target).text() ); }, iframeFix: true, connectToSortable:$('#frame').contents().find('.content').sortable({ iframeFix: true, placeholder: 'block-placeholder', update: function (event, ui) { // turn the dragged item into a "block" ui.item.addClass('block'); } }) }); 

FIDDLE ： http ： //jsfiddle.net/w9L3eorx/5/

请注意，您的iframe应该只是纯HTML（不要在那里初始化可排序或者行为不当）

Answer 2

我已经改变了boszlo示例以满足我的需求：

• 我需要在iframe中首先进行init排序（我的可丢弃侧边栏会在稍后点击后显示）
• 我需要在父（主）框架中重新初始化可排序的连接可丢弃但具有完全相同的选项 。

http://jsfiddle.net/w9L3eorx/8/

所以在iframe我添加了function

 window.destroySortableAndGetOptions = function (selector) { var opts = $(selector).sortable('option'); $(selector).sortable('destroy'); return opts; } 

这将破坏可排序和退货选项。

在droppable init之前的我的主框架中 ，我销毁sortable并选择

 var sortableOptions = document.getElementById('frame').contentWindow.destroySortableAndGetOptions('.content'); 

并使用相同的选项重新初始化sortable

 ... connectToSortable:$('#frame').contents().find('.content').sortable(sortableOptions) ...