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) {},
}
}