当前位置：首页 > JavaScript

js实现vuedraggable

2026-04-06 02:25:13JavaScript

使用 VueDraggable 实现拖拽功能

VueDraggable 是基于 Sortable.js 的 Vue 组件，用于实现拖拽排序功能。以下是具体实现方法。

安装依赖

确保已安装 Vue 和 VueDraggable 依赖：

npm install vuedraggable

基本用法示例

在 Vue 组件中引入并使用 VueDraggable：

<template>
  <div>
    <draggable v-model="list" @end="onDragEnd">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽结束', this.list);
    }
  }
};
</script>

配置选项

VueDraggable 支持多种配置选项，以下是一些常用配置：

<draggable
  v-model="list"
  :options="{ animation: 150, handle: '.handle' }"
  @start="onDragStart"
  @end="onDragEnd"
>
  <div v-for="item in list" :key="item.id">
    <span class="handle">☰</span>
    {{ item.name }}
  </div>
</draggable>

跨列表拖拽

实现两个列表之间的拖拽功能：

js实现vuedraggable

<template>
  <div>
    <draggable v-model="list1" group="items" @end="onDragEnd">
      <div v-for="item in list1" :key="item.id">{{ item.name }}</div>
    </draggable>
    <draggable v-model="list2" group="items" @end="onDragEnd">
      <div v-for="item in list2" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      list1: [
        { id: 1, name: 'Item A' },
        { id: 2, name: 'Item B' }
      ],
      list2: [
        { id: 3, name: 'Item C' },
        { id: 4, name: 'Item D' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽结束', this.list1, this.list2);
    }
  }
};
</script>