当前位置：首页 > JavaScript

js实现vuedraggable

2026-02-01 09:45:37JavaScript

实现 VueDraggable 的 JavaScript 方法

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

安装依赖

npm install vuedraggable

基本用法示例

在 Vue 组件中引入并使用：

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

常用配置选项

可以通过 options 属性传递 Sortable.js 的配置：

<draggable 
  v-model="list" 
  :options="{ 
    animation: 150,
    handle: '.handle',
    ghostClass: 'ghost'
  }"
>
  <div v-for="item in list" :key="item.id">
    <span class="handle">≡</span>
    {{ item.name }}
  </div>
</draggable>

跨列表拖拽

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

<template>
  <div class="container">
    <draggable 
      v-model="list1" 
      group="shared" 
      @change="log"
    >
      <div v-for="item in list1" :key="item.id">{{ item.name }}</div>
    </draggable>

    <draggable 
      v-model="list2" 
      group="shared" 
      @change="log"
    >
      <div v-for="item in list2" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

自定义样式

添加拖拽时的视觉效果：

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.sortable-chosen {
  background: #f0f0f0;
}

进阶功能

实现克隆功能和非拖拽元素：

js实现vuedraggable

<draggable 
  v-model="list"
  :options="{
    group: {
      name: 'shared',
      pull: 'clone'
    },
    sort: false
  }"
>
  <div v-for="item in list" :key="item.id">
    {{ item.name }}
  </div>
</draggable>