在动态创建的列表之间移动项目

Question

我有一个菜单，我可以在其中创建动态块并放入一些字段。

当我将一个字段拖到一个块中时，我还希望它们可以跨多个块进行排序。但它们只能在块内排序。

这是我的 HTML 代码：

<div class="draggable">

  <h2>Structure elements</h2>
  <div class="structure">
    <div class="item1 e1" data-class="e1">New block</div>
    <div class="item1 e2" data-class="e2">New headline</div>
  </div>

  <h2>Fields</h2>
  <div class="fields">
    <div class="item2">Date</div>
    <div class="item2">Time</div>
    <div class="item2">Text</div>
  </div>

</div>

<div class="sortable"></div>

这就是 JS

$(".sortable").sortable({
  receive: function (event, ui) {
    var itemClass = $(ui.item).attr("data-class");
    $(".sortable ." + itemClass).css({
      height: "auto",
      width: "auto"
    });
  }
});

$(".structure .item1").draggable({
  connectToSortable: ".sortable",
  helper: "clone",
  revert: "invalid",

  stop: function (event, ui) {
    $(".sortable .item1").sortable({
      revert: false
    });
  }
});

$(".fields").sortable({
  connectWith: ".sortable .item1",
  items: "> .item2"
});

你知道我如何制作字段，将其拖到克隆块中，sort/drag 到另一个块吗？

不应克隆字段，每个字段都是唯一的并且只能使用一次。

在这里 https://codepen.io/alphafrau/pen/PoQRmYm 您可以找到我当前代码的示例。

Answer 1

在 this 示例中，元素被拖过列，因此在您的代码中只需在这部分添加 connectWith: ".item1"：

stop: function (event, ui) {
  $(".sortable .item1").sortable({
    connectWith: ".item1",
    revert: false,
    stop: function () {
      console.log($(this));
    },
  });
},