sortablejs. 列表之间的拖动

要实现列表之间的拖动，可以使用 SortableJS 库。这个库可以让你轻松地实现拖放排序功能，支持多种框架和库，包括 React、Angular、Vue 等等。

使用 SortableJS 的基本步骤如下：

1. 引入 SortableJS 库和样式文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>

2. 创建一个列表，并为其添加一个 ID：

<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

3. 初始化 SortableJS：

var mylist = document.getElementById("my-list");
new Sortable(mylist);

这样就可以实现基本的列表拖放排序了。当然，还有很多其他的配置选项可以使用，比如限制拖放的方向、设置拖放时的样式等等。

相关问题

vue2中两个列表使用sortablejs相互拖拽

在 Vue.js 2 中，你可以使用 SortableJS 这个强大的 JavaScript 插件来实现在两个列表之间进行拖拽交互。以下是简单的步骤：

1. 首先，你需要安装 SortableJS 和它的依赖库，比如 VueSortable 或者直接在项目中通过 npm 安装：

   npm install sortablejs vue-sortable vuedraggable

2. 引入所需的模块到你的 Vue 组件中：

   import Sortable from 'vue-sortable';
   import draggable from 'vuedraggable';

3. 创建两个数据数组，假设分别为 `listA` 和 `listB`，并将它们绑定给 Sortable 或 draggable 的元素：

   <ul id="listA" v-model="listA" :sortable="optionsA">
     <!-- ...每个项的 HTML模板... -->
   </ul>
   
   <ul id="listB" v-model="listB" :draggable="true">
     <!-- ...每个项的 HTML模板... -->
   </ul>

4. 初始化 Sortable 或 draggable 的配置，包括排序选项：

   data() {
     return {
       listA: [...], // 初始化的数据
       listB: [...],
       optionsA: { /* SortableJS 的配置 */ },
     };
   },
   methods: {
     handleDrop(event) { /* 接收拖放事件并更新数据 */
       const draggedItem = event.dragged;
       const droppedIndex = event.newIndex;
       this.$set(this.listB, droppedIndex, draggedItem); // 将item移动到新位置
     }
   }

5. 对于 SortableJS，你需要提供类似这样的配置：

   methods: {
     optionsA: {
       group: '__group__', // 指定哪些元素可以互相拖动
       animation: 150,
       onEnd: (event) => {
         this.handleDrop(event);
       },
     },
   }

6. 当一个元素从 `listA` 被拖放到 `listB`，在 `handleDrop` 方法中处理数据的变化，确保同步。

el-tree如何使用Sortable.js进行拖拽

el-tree是Element UI中的一个组件，它提供了树形结构的展示和交互功能。而Sortable.js是一个用于拖拽排序的JavaScript插件。如果要在el-tree中使用Sortable.js进行拖拽排序，可以按照以下步骤进行：

1. 安装Sortable.js和其依赖的插件，可以使用npm或者直接引入CDN链接：

//使用npm安装
npm install sortablejs --save

//在HTML中引入CDN链接
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>

2. 在el-tree中添加`@node-drop`事件，该事件会在节点被拖拽到目标节点时触发。

<el-tree
    :data="treeData"
    @node-drop="handleNodeDrop"
></el-tree>

3. 在`handleNodeDrop`函数中使用Sortable.js的API进行拖拽排序操作，具体实现可以参考以下代码：

methods: {
    handleNodeDrop(draggingNode, dropNode, dropType) {
      //在这里使用Sortable.js进行拖拽排序操作
      const draggingEl = draggingNode.$el;
      const dropEl = dropNode.$el;

      //如果拖拽的节点是一个子节点，需要先将其从父节点中删除
      if (draggingNode.parent) {
        draggingNode.parent.removeChild(draggingNode);
      }

      //获取父节点和子节点的数据
      const parentData = draggingNode.parent.data;
      const childData = draggingNode.data;

      //确定拖拽的方向
      const direction = dropType === 'before' ? -1 : 1;

      //获取目标节点在父节点的索引位置
      const targetIndex = parentData.children.indexOf(dropNode.data);

      //将子节点插入到目标节点的位置
      parentData.children.splice(targetIndex + direction, 0, childData);

      //更新视图
      this.$nextTick(() => {
        const draggingNodeEl = this.$refs.tree.getNode(draggingNode.key).$el;
        const dropNodeEl = this.$refs.tree.getNode(dropNode.key).$el;
        const draggingRect = draggingEl.getBoundingClientRect();
        const dropRect = dropEl.getBoundingClientRect();
        const offsetX = dropType === 'before' ? 0 : dropRect.width;
        const offsetY = dropRect.height / 2 - draggingRect.height / 2;
        const translateX = dropRect.left - draggingRect.left + offsetX;
        const translateY = dropRect.top - draggingRect.top + offsetY;

        //使用CSS3动画将拖拽的节点移动到目标位置
        draggingNodeEl.style.transform = `translate(${translateX}px, ${translateY}px)`;
        draggingNodeEl.style.transition = 'all 0.2s';
        draggingNodeEl.addEventListener('transitionend', () => {
          draggingNodeEl.style.transform = '';
          draggingNodeEl.style.transition = '';
        }, { once: true });
      });
    }
}

在上述代码中，我们首先获取了拖拽的节点和目标节点的DOM元素，然后通过计算它们之间的位置差，使用CSS3动画将拖拽的节点移动到目标位置。在动画结束后，我们再将拖拽的节点插入到目标节点的位置，并更新树形结构的视图。

总之，使用Sortable.js进行拖拽排序需要结合el-tree组件的`@node-drop`事件来实现，具体的实现方式可以根据项目的需求进行调整。