Jquery 将Dropable拖到具有sortable的iframe中

当尝试创建一个

droppable

时，将项目放入另一个

iframe

中的

sortable

。我成功地创建了两个独立的框架并将它们链接起来，得到了以下jQuery对象：

• 发送方-可拖放文件的来源容器
• 项目-正在拖动的项目
• 接收器-目标可排序容器

将项目从

droppable

拖动到

sortable

的功能仍然缺失，因此我需要检查和调试JSFIDLE以使此功能正常工作并优化代码。所有的逻辑都在这个JS脚本中

有些问题已经在这里讨论过了，但仅凭这些信息，我无法使其发挥作用

//创建iframe
$('
// Create the iframe
$('<iframe id="editor-iframe" name="editor-iframe" src="" style="width:100%;overflow:visible;scrolling="no" seamless="seamless">').appendTo('body');
var iframe = $("#editor-iframe").contents();
iframe.bind("change", function() {
  $("#editor-iframe").css({
    height: iframe.$("body").outerHeight()
  });
});

// Parameters for sortable
var sortableParameters = {
  connectWith: '.connectedSortable',
  placeholder: {
    element: function(currentItem) {
      return '<li></li>';
    },
    update: function(container, placeholder) {
      if ($(container.element[0]).hasClass('sortable-grid')) {
        placeholder.removeClass('highlight-vertical');
        placeholder.addClass('highlight-horizontal');
      } else if ($(container.element[0]).hasClass('sortable-row')) {
        placeholder.removeClass('highlight-horizontal');
        placeholder.addClass('highlight-vertical');
      }
      return;
    }
  },
  start: function(event, ui) {
    if (typeof sender != 'undefined') {
      if (sender.hasClass('items')) {
            receiver = $(this);
      }
      return;
    }
    sender = $(this);
  },
  over: function(event, ui) {},
  stop: function(event, ui) {
    item = $(ui.item);
    receiver = $(ui.item.parent());

    //Create wrapper around cells passed into new rows
    if (item.hasClass('sortable-cell') && receiver.hasClass('sortable-grid')) {
      item.wrap("<li class='sortable-table'><ul class='sortable-row connectedSortable ui-sortable'></ul></li>").parentElement.sortable(sortableParameters);
    }
  },
  iframeFix: true
}

// Called after done loading the iframe
$("#editor-iframe").on("load", function() {

  // Initialize draggable
  $('.items li').draggable({
    start: function(event, ui) {
      sender = $(event.target.parentElement);
    },
    over: function(event, ui) {},
    stop: function(event, ui) {
      item = $(event.target);

      //Create wrapper around cells passed into new rows
      if (item.hasClass('sortable-cell') && receiver.hasClass('sortable-grid')) {
        item.wrap("<li class='sortable-table'><ul class='sortable-row connectedSortable ui-sortable'></ul></li>").parent().sortable(sortableParameters);
      }
    },
    helper: 'clone',
    iframeFix: true,
    connectToSortable: $('#editor-iframe').contents().find('.sortable-grid, .sortable-row').sortable(sortableParameters), // Initialize sortable
  });
});

// Load content for iframe
$("#editor-iframe").attr("src", "http://fiddle.jshell.net/piglin/UAcC7/1848/show/light/");