vue拖拽排序插件vuedraggable使用方法详解

大家好，最近做的项目要用到拖拽排序，我现在的项目是某视频剪辑软件项目，所以我就屁颠屁颠的去百度有木有这样功能的插件，我就知道一定会有，那就是vuedraggable，这是一款很棒的拖拽插件，下面我来说一下怎么引入

首先在某视频剪辑软件项目中，用新公共管理包下载下来

新公共管理安装vuedraggable -S下载下来后，引入插件，在你的某视频剪辑软件文件的脚本标签里面这样引入

从“vuedraggable”导入可拖动的别忘了下面要注册组件

组件： {可拖动},然后就可以在模板标签里面使用了

可拖动的v-model=' colors ' @ update=' datadragEnd ' : options=' { animation :500 } '过渡组div-for=' colors中的元素' : key='元素。text ' class=' drag-item“{ element。文本} }/div/过渡组/可拖动下面贴一下详细用法

模板可拖动v-model=' colors ' @ update=' datadragEnd ' : options=' { animation :500 } '过渡-组div-for=' colors中的元素' : key='元素。text ' class=' drag-item“{ element。文本} }/div/过渡-组/可拖动/templatescript从“vuedraggable”导入可拖动导出默认值{ data(){ return { msg 3360 }这是测试组件，颜色：[{ text: '海蓝宝石，}，{ text: 'Hotpink '，}，{ text: 'Gold '，}，{ text: '绯红，}，{ text: 'Blueviolet '，}，{ text: 'Lightblue '，}，{ text: '矢车菊蓝，}，{ text: ' Skyblue '，}，{ text 33:console.log('拖动前的索引：' evt.oldIndex) console.log('拖动后的索引： ' evt。NewIndex)控制台。日志(这个。颜色)；} },挂载(){ //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效文件。尸体。ondrop=function(event){ event。prevent default()；事件。stopperpagation()；} } }/脚本样式lang="SCS "范围。测试{ border:1px固体# ccc}。拖动项目{宽度： 200像素高度： 50px线高： 50pxmargin:汽车相对位置：背景# DDD margin-top :20 px；} .幽灵类{ opa city 3360 1；} .底部{宽度： 200像素；高度： 50px相对位置：背景：蓝色；top :2 pxleft : 2 extraction :所有。5s线性；}/样式下面是结果

上下是可以拖动的，只是截图的话看不出效果来，小伙伴们注意了，里面有个选择选项，这个选项怎么来的呢，据我观察这个插件是基于sortable.js，所以这个选择里面的配置，和可排序的。射流研究…是一样的，下面我贴两个地址，一个是vuedraggable的开源代码库地址，一个是可排序的。射流研究…的开源代码库地址

vuedraggable:学习地址

可排序。js:学习地址

选择配置如下

var sortable=new Sortable(el，{ group: 'name '，//或{ name: ' . '，pull: [true，false，clone]，put: [true，false，array] } sort: true，//列表内部排序delay: 0，//定义排序何时开始的时间（以毫秒为单位)touchstartthreshold : 0 0，//px，取消延迟拖动事件之前点应该移动多少像素disabled: false，//如果设置为没错，则禁用可排序store: null，//@参见店铺动图： 150，//ms，排序时移动项目的动画速度，` 0` —无动画句柄： '。my-handle '，//在列表项筛选器：中拖动句柄选择器。忽略-元素'，//不会导致拖动的选择器(字符串或函数)preventonfilter : true，//触发时调用事件。prevent default()“filter”可拖动：项目'，//指定元素中的哪些项应该是可拖动的ghostClass: '可排序-ghost '，//放置占位符' chosenClass: '可排序-选择'的类名，//所选项dragClass: '可排序-拖动'的类名，//拖动项dataIdAttr: '数据-身份证的类名，forceFallback: false，//忽略HTML5 DnD行为并强制回退至fallbackClass: '中scroll: true，//或HTMLElement scrollFn:函数(偏移，偏移，原始偏移，接触，悬停目标El){ 0.},//如果你有自定义滚动条滚动可能用于自动滚动scroll敏化： 30，//px，鼠标必须离一个边缘多近才能开始滚动scrollSpeed: 10，//px setData:函数(/** DataTransfer */dataTransfer，/* * HTMLElement */dragEl){ DataTransfer。setdata(' Text '，dragEl。text content)；//`数据传输'对象的HTML5 DragEvent }，//元素是在选择：函数上选择的(/* *事件*/evt){ evt。oldindex//父级内的元素索引，//元素拖动启动onStart:函数(/* *事件*/evt){ evt。oldindex//父级内的元素索引，//元素拖动结束onEnd:函数(/* * Event */evt){ var itemEl=evt。项目；//将HTMLElement。等粘温度拖到；//目标列表evt.from//上一个列表evt.oldIndex//旧父evt.newIndex中元素的旧索引；//元素在新父级中的新索引}、//元素从另一个列表中拖放到列表中onAdd:函数(/* *事件*/evt) { //与竖着相同的属性}、//在列表中更改排序onUpdate:函数(/* *事件*/evt) { //与竖着相同的属性}、//由对列表的任何更改（添加/更新/删除)调用onSort:函数(/* *事件*/evt) { //与竖着相同的属性}, //元素已从列表中移除到另一个列表中onRemove:函数(/* *事件*/evt) { //与竖着相同的属性},//尝试在滤波器：函数上拖动已筛选的元素(/* * Event */evt){ var itemEl=evt。项目；//HTMleElement正在接收" mousedown|tapstart "事件。},//当您在移动：函数上移动列表中或列表之间的项目时的事件(/* *事件*/evt，/* *事件*/originalEvent){//示例： http://jsbin.com/tuyafe/1/edit?js,output evt。拖着；//拖动的evt.draggedRect//text矩形左、上、右-下} evt.related//HTMlelement，您已经在其上引导了evt.relatedRect//text矩形原创。客户关系；//鼠标位置//返回错误——对于取消}，//在创建oncolone :函数(/* *事件*/evt)的元素克隆时调用{ var origEl=evt . item var cloneEl=evt . clone } })；好了，今天的介绍就到这里啦，快去试试吧。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。