在 Vue 2 中实现可拖拽排序指令：v-sortable

在开发过程中，我们经常需要实现元素的拖拽排序功能。本文将详细介绍如何在 Vue 2 中创建一个自定义指令 v-sortable，使元素可以拖拽并交换位置，同时更新数据的位置。

自定义指令 v-sortable

首先，我们需要创建一个自定义指令 v-sortable，它使元素可拖动并处理拖放事件。

  1. 创建自定义指令 sortable.js
// directives/sortable.js
export default {
  bind(el, binding, vnode) {
    el.draggable = true;

    el.addEventListener('dragstart', (event) => {
      event.dataTransfer.setData('text/plain', binding.value);
      el.classList.add('dragging');
    });

    el.addEventListener('dragend', () => {
      el.classList.remove('dragging');
    });

    el.addEventListener('dragover', (event) => {
      event.preventDefault();
    });

    el.addEventListener('drop', (event) => {
      event.preventDefault();
      const draggedIndex = event.dataTransfer.getData('text/plain');
      const droppedIndex = binding.value;

      console.log('Drag Drop Event: ', { draggedIndex, droppedIndex });
      vnode.context.handleDrop({ draggedIndex, droppedIndex });
    });
  }
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
2. 在 组件中使用自定义指令

接下来，在你的 Vue 组件中使用这个自定义指令，并处理 handleDrop 方法以更新数据的位置。

<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in items"
        :key="item.id"
        v-sortable="index"
        :class="{ dragging: draggingIndex === index }"
        @dragstart="setDraggingIndex(index)"
        @dragend="clearDraggingIndex"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import sortable from './directives/sortable';

export default {
  directives: {
    sortable
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      draggingIndex: null
    };
  },
  methods: {
    handleDrop({ draggedIndex, droppedIndex }) {
      console.log('Handle Drop Event: ', { draggedIndex, droppedIndex });

      const draggedItem = this.items[draggedIndex];
      this.items.splice(draggedIndex, 1);
      this.items.splice(droppedIndex, 0, draggedItem);
    },
    setDraggingIndex(index) {
      this.draggingIndex = index;
    },
    clearDraggingIndex() {
      this.draggingIndex = null;
    }
  }
};
</script>

<style scoped>
li {
  list-style: none;
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  cursor: move;
}

li.dragging {
  opacity: 0.5;
  background-color: #ddd;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.

3. 解释

指令部分：

在 drop 事件处理函数中，直接调用 vnode.context.handleDrop，确保处理函数在当前组件上下文中被正确执行。

组件部分：

使用 v-sortable="index" 将 index 传递给指令。

在 handleDrop 方法中处理拖拽事件，更新数据的位置。

4. 调试与验证

验证事件触发：

在 drop 事件处理函数中添加 console.log 语句，确保事件数据传递正确。

验证事件监听器：

在 handleDrop 方法中添加 console.log 语句，确保方法被正确调用。

验证事件绑定：

确保事件监听器绑定在正确的元素上，检查组件模板，确保 @item-dropped="handleDrop" 确实存在于每个 li 元素中。

通过这些步骤，你可以验证事件是否正确触发并被监听，从而实现 Vue 2 中的拖拽排序功能。


结语

本文详细介绍了如何在 Vue 2 中实现一个可拖拽排序的自定义指令 v-sortable，通过处理拖拽事件来实现元素位置的交换和数据更新。希望本文能对你的开发有所帮助。