將專案拖到動態創建的串列上后無法洗掉-有解無憂

我創建了一個欄位編輯器，您可以在其中通過拖放創建多個塊并將它們克隆，因為您可以使用任意數量的塊。然后有機會從左側的串列中輸入欄位。

到目前為止，這作業正常。

<div class="draggable">

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

  <h2>Fields</h2>
  <div class="fields item1">
    <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>

我的腳本如下所示：

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

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

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

不幸的是，無法從右側的塊中洗掉欄位。

你能告訴我我必須做什么以及為什么這不起作用嗎？

這就是我的代碼的樣子https://codepen.io/alphafrau/pen/gOvzjGj

uj5u.com熱心網友回復：

當您在 Sortable 中初始化 Sortable 時，您需要定義connectWith選項。我會建議：

connectWith: ".sortable .item1, .fields"

這允許它被移動到任何可排序的串列中。

$(function() {
  $(".structure .item1").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    stop: function(event, ui) {
      $(".sortable .item1").sortable({
        connectWith: ".sortable .item1, .fields"
      });
    }
  });

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

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

.draggable {
  background: #CCC;
  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;
}

.fields {
  background: aqua;
  padding: 10px;
}

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

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

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div class="draggable">
  <h2>Structure</h2>
  <div class="structure">
    <div class="item1 block e1" data-class="e1">New block</div>
    <div class="item1 headline e2" data-class="e2">New headline</div>
  </div>
  <h2>Fields</h2>
  <div class="fields item1">
    <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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/495501.html

標籤：jQuery jQuery-ui jquery-ui-可排序 jquery-ui-可拖动

上一篇：將utc時間字串轉換為日期物件

下一篇：拖動后元素不可點擊