js sortable能实现跨列表拖拽吗

JavaScript Sortable库本身不支持跨列表拖拽。但是，您可以结合其他库（如Sortable.js和Gridstack.js）来实现跨列表拖拽的功能。

这里是一个使用Sortable.js和Gridstack.js实现跨列表拖拽的示例：

1. 首先，确保在您的项目中包含了Sortable.js库。您可以使用CDN链接或者下载到本地。

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> 

2. 接下来，引入Gridstack.js库及其CSS样式。您可以使用CDN链接或者下载到本地。

<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> 

3. 在HTML中创建两个列表（使用<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> 

4. 使用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, }); 

5. 将可拖拽的元素添加到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); }); 

现在，您应该可以在两个列表之间拖拽元素了。请注意，这个示例仅用于演示目的，您可能需要根据您的需求进行调整。