免费开源的 Vue 拖拽组件 VueDraggablePlus （兼容移动端）

VueDraggablePlus 是一个基于 Vue.js 和 Sortable.js 的拖拽组件，旨在提供一个易于使用、功能丰富的拖拽解决方案。

以下是如何使用 VueDraggablePlus 的基本示例：

首先，确保安装了 VueDraggablePlus：

npm install @bean-maker/vue-draggable-plus --save

然后在你的 Vue 应用中引入并使用它：

<template>
  <div>
    <draggable-plus v-model="list" group="items" @change="logEvent">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </draggable-plus>
  </div>
</template>
 
<script>
import { DraggablePlus } from '@bean-maker/vue-draggable-plus';
 
export default {
  components: {
    DraggablePlus
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // ...
      ]
    };
  },
  methods: {
    logEvent(event) {
      console.log(event);
    }
  }
};
</script>

在这个例子中，draggable-plus 组件被用来创建一个可拖拽的列表。v-model 用于实现数据的双向绑定，group 属性确保了同一组内的元素可以被拖拽，@change 事件用于监听拖拽操作。

VueDraggablePlus 提供了多种属性和事件来控制拖拽行为，并且它是兼容移动端的，用户可以在移动设备上进行拖拽操作。