我有一個選單，我可以在其中創建動態塊并放入一些欄位。
當我將一個欄位拖到一個塊中時，我還希望它們可以跨多個塊進行排序。但它們只能在塊內排序。
這是我的 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"
});
您知道如何制作欄位，將其拖到克隆塊，排序/拖動到另一個塊嗎？
欄位不應該被克隆，每個欄位都是唯一的并且只能使用一次。
在這里https://codepen.io/alphafrau/pen/PoQRmYm您可以找到我當前代碼的示例。
uj5u.com熱心網友回復：
在此示例中，元素跨列拖動，因此在您的代碼connectWith: ".item1"中只需添加此部分：
stop: function (event, ui) {
$(".sortable .item1").sortable({
connectWith: ".item1",
revert: false,
stop: function () {
console.log($(this));
},
});
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485316.html
標籤：jQuery jQuery-ui jquery-ui-可排序 jquery-ui-可拖动 jquery-ui-droppable
上一篇：允許CSRF_TRUSTED_ORIGINdjango中的所有ip
下一篇：CSS過渡沒有回應