JavaScript Sortable库本身不支持跨列表拖拽。但是,您可以结合其他库(如Sortable.js和Gridstack.js)来实现跨列表拖拽的功能。
这里是一个使用Sortable.js和Gridstack.js实现跨列表拖拽的示例:
- 首先,确保在您的项目中包含了Sortable.js库。您可以使用CDN链接或者下载到本地。
- 接下来,引入Gridstack.js库及其CSS样式。您可以使用CDN链接或者下载到本地。
- 在HTML中创建两个列表(使用
元素)和多个可拖拽的元素(使用元素)。
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- 使用JavaScript初始化Sortable对象和Gridstack对象。
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, });
- 将可拖拽的元素添加到Gridstack对象中,并设置它们的
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); });
现在,您应该可以在两个列表之间拖拽元素了。请注意,这个示例仅用于演示目的,您可能需要根据您的需求进行调整。