jQuery 可排序 - 将项目拖到之前拖过的项目中

Question

我根据用户的选择创建了一个带有输入字段掩码的拖放界面。因此，您可以拖动块，重新排列它们并在块内拖动多个字段。

我现在可以创建新块，但无法将字段拖到这些块中。

<div class="draggable">

    <h2>Structure</h2>
    <div class="structure">
        <div class="item1">New block</div>
        <div class="item1">New headline</div>
    </div>

    <h2>Fields</h2>
    <div class="fields1 fields2">
        <div class="item2">Date</div>
        <div class="item2">Time</div>
        <div class="item2">Relation</div>
        <div class="item2">Text</div>
    </div>

</div>

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

我的 jQuery 代码看起来像这样，但是我无法将字段拖到我之前拖到 .sortable 的结构元素中。

$( ".sortable" ).sortable({
    revert: true
});

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

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

$( ".sortable .item1" ).sortable({
    revert: true
});

这是我目前这个项目的状态https://jsfiddle.net/alphafrau/egcbL5nt/5/

有人可以帮我吗？

亲切的问候彼得

Answer 1

你想要这样吗？

$(".sortable").sortable({
    revert: true
  });

  $(".item1").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "invalid",
    stop: function(event, ui) {
      $(".sortable .item1").sortable({
        revert: true
      });
    }
  });

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

h1 {
  padding: 0 0 0 350px;
}

.draggable {
  background: #c9c9c9;
  border: 2px solid #666;
  padding: 0 10px;
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  width: 300px;
}

.draggable .item1 {
  background: lime;
  border: 2px solid green;
  padding: 5px;
  margin: 2px;
}

.draggable .item2 {
  background: Yellow;
  border: 2px solid Orange;
  padding: 5px;
  margin: 2px;
}

.sortable {
  background: Orange;
  border: 2px solid OrangeRed;
  padding: 20px;
  margin: 0 0 0 350px;
}

.sortable .item1 {
  background: fuchsia;
  border: 2px solid brown;
  padding: 5px;
  margin: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div class="draggable">

  <h2>Structure</h2>
  <div class="structure">
    <div class="item1">New block</div>
    <div class="item1">New headline</div>
  </div>

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

</div>

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

jQuery 可排序 - 将项目拖到之前拖过的项目中

jQuery Sortable - Drag items into previously dragged items

jquery

jquery-ui-sortable