Vue Draggable | 一款基于vuejs3.x的拖拽组件

vue draggable 是一款基于vuejs3.x的拖拽组件。该组件允许用户进行拖放操作，并将结果同步到视图模型数组中。

vue draggable基于Sortable.js并提供它的所有功能。

vue draggable组件完全支持Sortable.js的所有功能，包括以下特性：

• 支持触摸设备
• 支持拖动手柄和可选择文本
• 智能自动滚动
• 支持在不同列表之间拖放
• 不依赖于jQuery

此外，该组件还具有以下功能：

• 保持HTML和视图模型列表同步
• 兼容Vue.js 3.0 transition-group
• 支持取消拖放操作
• 在需要完全控制时报告任何更改的事件
• 可以重用现有的UI库组件（例如vuetify、element或vue material等），并使用tag和componentData属性使它们可拖动。

版本说明：

本文档介绍的是vue.draggable.next，支持vue3.x。

如果要在vue2.x中使用，请查看Vue.Draggable

使用方法

安装

如果您想使用vue draggable拖拽组件，首先您需要安装它，命令如下：

yarn add vuedraggable@next
// 或者
npm i -S vuedraggable@next
		

使用

基本使用

<draggable 
  v-model="myArray" 
  group="people" 
  @start="drag=true" 
  @end="drag=false" 
  item-key="id">
  <template #item="{element}">
    <div>{{element.name}}</div>
   </template>
</draggable>

import draggable from 'vuedraggable'
...
export default {
	components: {
	    draggable,
	},
	data() {
	  return {
	    drag: false,
	  }
	},
...
		

和 transition-group 一起使用

<draggable v-model="myArray" item-key="id">
  <template #item="{element}">
    <div> {{element.name}} </div>
  </template>
  <template #header>
    <button @click="addPeople">Add</button>
  </template>
</draggable>
		

结合vuex使用

<draggable v-model='myList'>

computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}     
    

配置参数

Vue Draggable 拖拽组件的可用配置参数如下：

• modelValue： 该属性的类型为Array，不是必需的，并且默认为null。它是可拖动组件的输入数组，通常与内部元素的v-for指令引用的数组相同。这是使用Vue.draggable的首选方法，因为它与Vuex兼容。它不应直接使用，而只能通过v-model指令使用。
• list：该属性的类型为Array，不是必需的，并且默认为null。它是一个备选项，用于与拖放同步的数组。主要区别在于，list属性由可拖动组件使用splice方法更新，而modelValue是不可变的。不要与modelValue属性一起使用。
• itemKey：该属性的类型可以是字符串或函数，是必需的。它用作元素键的属性。或者，它可以是一个接收列表元素并返回其键的函数。
• group：指定可排序列表所属的组，可以用一个字符串或一个对象来表示。
• sort：是否在列表内部对项目进行排序。
• delay：在开始排序之前等待的时间（以毫秒为单位）。
• touchStartThreshold：在开始拖动之前，指针必须移动的最小距离（以像素为单位）。
• disabled：是否禁用可排序列表。
• store：用于存储排序后列表项状态的对象。
• animation：拖动项目时的动画速度（以毫秒为单位）。
• easing：动画缓动函数，可以是一个字符串或一个函数。
• handle：指定拖动手柄的选择器。
• filter：指定不应该触发拖动的元素选择器。
• preventOnFilter：当元素被过滤时是否调用 event.preventDefault()。
• draggable：指定哪些元素应该是可拖动的。
• ghostClass、chosenClass、dragClass：分别是占位符、选中项和正在拖动项的 CSS 类名。
• swapThreshold、invertSwap、invertedSwapThreshold：控制交换区域的大小和方向。
• direction：指定列表的方向，可以是 'horizontal' 或 'vertical'。
• forceFallback、fallbackClass、fallbackOnBody、fallbackTolerance：控制在不支持 HTML5 拖放 API 的浏览器中使用回退方案。
• dragoverBubble：控制是否允许拖动事件冒泡到父元素。
• removeCloneOnHide：控制当克隆元素不显示时是否删除它。
• emptyInsertThreshold：指定鼠标距离空列表的最小距离，以便将拖动元素插入其中。
• tag：该属性的类型为字符串，默认为'div'。它是可拖动组件为包含的插槽创建的外部元素的HTML节点类型。也可以将vue组件的名称作为元素传递。在这种情况下，draggable属性将传递给创建组件。如果需要设置创建的组件的props或事件，请参见componentData。
• clone：该属性的类型为函数，不是必需的，默认为(original) => { return original;}。当clone选项为true时，在源组件上调用该函数以克隆元素。唯一的参数是要克隆的viewModel元素，返回值是它的克隆版本。默认情况下，vue.draggable重用viewModel元素，因此如果要克隆或深度克隆它，您必须使用此钩子。

• move：该属性的类型为函数，不是必需的，默认为null。如果不为null，则会以类似于Sortable onMove回调的方式调用此函数。返回false将取消拖动操作。

  function onMoveCallback(evt, originalEvent){
     ...
      // return false; — for cancel
  }
  				

  evt对象具有与Sortable onMove事件相同的属性，以及3个附加属性：

  • draggedContext：与拖动元素相关联的上下文
  • index：拖动元素的索引
  • element：拖动元素的底层viewModel元素
  • futureIndex：如果接受放置操作，则拖动元素的潜在索引
• relatedContext：与当前拖动操作相关联的上下文
  • index：目标元素的索引
  • element：目标元素的viewModel元素
  • list：目标列表
  • component：目标VueComponent

  如果需要取消拖动操作，可以返回false。例如：

  <draggable :list="list" :move="checkMove">
  checkMove: function(evt){
      return (evt.draggedContext.element.name!=='apple');
  }
  				

• componentData：该属性的类型为对象，不是必需的，默认为null。此属性用于将附加信息传递给由标签属性声明的子组件。

componentData属性的值是一个对象，对应于我们将传递给组件的属性、props和事件。

下面是和element UI 一起使用的例子:

<draggable tag="el-collapse" :list="list" :component-data="getComponentData()" item-key="name">
  <template #item="{element}">
    <el-collapse-item :title="element.title" :name="element.name">
        <div>{{element.description}}</div> 
     </el-collapse-item>
  </template>
</draggable>

methods: {
    handleChange() {
      console.log('changed');
    },
    inputChanged(value) {
      this.activeNames = value;
    },
    getComponentData() {
      return {
        onChange: this.handleChange,
        onInput: this.inputChanged,
        wrap: true,
        value: this.activeNames
      };
    }
  }
				

github网址：https://github.com/SortableJS/vue.draggable.next