Question

尝试创建droppable以放弃sortable中另一个iframe中的项目时。我成功创建了两个独立的框架并将它们链接起来，我得到了以下jQuery对象：

发件人 - droppable源自的容器
项目 - 正在拖动的项目
接收方 - 目标可排序容器

将项目从droppable拖动到sortable的功能仍然缺失，因此我需要检查并调试JSFiddle以使此功能正常工作并优化代码。所有逻辑都在这个JS脚本中。

这里已经讨论了一些问题，但仅就信息而言，我无法使其发挥作用。

// 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/");

将droppable拖放到可排序的iframe中

0 个答案: