当前位置：首页 > VUE

vue实现li元素拖拽

2026-02-24 14:14:06VUE

实现拖拽功能的基本步骤

在Vue中实现<li>元素的拖拽功能，可以使用HTML5的拖放API结合Vue的事件绑定和数据管理。以下是具体实现方法：

引入HTML5拖放API

HTML5提供了拖放API，通过draggable属性、dragstart、dragend、dragover和drop等事件实现拖拽功能。在Vue中，可以通过事件绑定和数据响应式更新来实现拖拽排序。

<template>
  <ul>
    <li
      v-for="(item, index) in items"
      :key="item.id"
      draggable="true"
      @dragstart="handleDragStart(index)"
      @dragover.prevent="handleDragOver(index)"
      @drop="handleDrop(index)"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

定义拖拽事件处理函数

在Vue组件的methods中定义拖拽事件的处理函数。handleDragStart用于设置被拖拽元素的索引，handleDragOver阻止默认行为以允许放置，handleDrop处理放置逻辑并更新数据。

vue实现li元素拖拽

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
      draggedIndex: null,
    };
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index;
    },
    handleDragOver(index) {
      event.preventDefault();
    },
    handleDrop(index) {
      if (this.draggedIndex !== null) {
        const draggedItem = this.items[this.draggedIndex];
        this.items.splice(this.draggedIndex, 1);
        this.items.splice(index, 0, draggedItem);
        this.draggedIndex = null;
      }
    },
  },
};
</script>

添加拖拽样式反馈

为了提高用户体验，可以在拖拽过程中添加样式反馈。通过动态绑定类名或样式，在拖拽时高亮显示目标位置。

<li
  v-for="(item, index) in items"
  :key="item.id"
  draggable="true"
  @dragstart="handleDragStart(index)"
  @dragover.prevent="handleDragOver(index)"
  @drop="handleDrop(index)"
  :class="{ 'dragging-over': draggedOverIndex === index }"
  @dragenter="draggedOverIndex = index"
  @dragleave="draggedOverIndex = null"
>
  {{ item.text }}
</li>

data() {
  return {
    draggedOverIndex: null,
  };
}

使用第三方库简化实现

如果项目复杂度较高，可以考虑使用第三方库如vuedraggable，它封装了拖拽逻辑并提供了更多高级功能。

vue实现li元素拖拽

安装vuedraggable：

npm install vuedraggable

使用示例：

<template>
  <draggable v-model="items" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    };
  },
};
</script>