Vue拖拽自定义顺序之draggable

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 具体说明，请参考：https://www.npmjs.com/package/vuedraggable

vuedraggable特性：

1.支持触摸设备
2.支持拖拽和选择文本
3.支持智能滚动
4.支持不同列表之间的拖拽
5.不以jQuery为基础
6.和视图模型同步刷新
7.和vue2的国度动画兼容
8.支持撤销操作
9.当需要完全控制时，可以抛出所有变化
10.可以和现有的UI组件兼容

使用

npm install vuedraggable

页面引入

<template>
	<draggable v-model="imgList" :options="dragOptions" :move="onMove" @start="datadragStart" 	@end="moveEndFn">
		<div class="demo-upload-list" v-for="(item, index) in imgList" :key="item.status">
       		<img class="delete" :src="item.url" alt="" 
      	</div>
 	</draggable>
</template>
import draggable from "vuedraggable";

export default {
  name: "vuedraggable",
  components: { draggable },
  computed: {
    dragOptions() {
      return {
        group: "description",
        disabled: !this.editable,
        ghostClass: "ghost",
        sort: true, // 内部排序列表
        touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
        store: null, // @see Store
        animation: 150, // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
        filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数)
        ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。
        dragClass: "sortable-drag", //拖动元素的class。
        handle: ".drag-icon",
      };
    },
  },
  
  methods: {
  // 拖拽结束操作，如果没有可以不写
    onMove() {},
    async datadragStart(evt) {},
    moveEndFn(evt) {},
   }
  }

标签：动画,Vue,自定义,拖动,支持,draggable,vuedraggable,拖拽
来源： https://blog.csdn.net/zyplll/article/details/115454249