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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部