JavaScript Sortable庫本身不支持跨列表拖拽。但是,您可以結合其他庫(如Sortable.js和Gridstack.js)來實現跨列表拖拽的功能。
這里是一個使用Sortable.js和Gridstack.js實現跨列表拖拽的示例:
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.min.js"></script>
<ul>
元素)和多個可拖拽的元素(使用<li>
元素)。<ul class="list-container" id="list1">
<li class="item" data-id="1">Item 1</li>
<li class="item" data-id="2">Item 2</li>
<li class="item" data-id="3">Item 3</li>
</ul>
<ul class="list-container" id="list2">
<li class="item" data-id="4">Item 4</li>
<li class="item" data-id="5">Item 5</li>
<li class="item" data-id="6">Item 6</li>
</ul>
const sortableList1 = new Sortable(document.getElementById('list1'), {
animation: 150,
onUpdate: function (event) {
const item = event.item;
const list = event.target;
const targetIndex = Array.from(list.children).indexOf(item);
const sourceIndex = Array.from(list.children).indexOf(item.previousSibling);
if (sourceIndex > targetIndex) {
list.insertBefore(item, list.children[targetIndex]);
} else {
list.insertBefore(item, list.children[targetIndex + 1]);
}
},
});
const gridstack = Gridstack.init({
element: '#grid',
columnWidth: 100,
rowHeight: 100,
autoPosition: true,
});
x
、y
和width
屬性。const items = document.querySelectorAll('.item');
items.forEach((item) => {
const x = Math.floor(Math.random() * 3);
const y = Math.floor(Math.random() * 3);
const width = 1;
const height = 1;
gridstack.add_item(item, x, y, width, height);
});
現在,您應該可以在兩個列表之間拖拽元素了。請注意,這個示例僅用于演示目的,您可能需要根據您的需求進行調整。