这篇文章主要为大家详细介绍了某视频剪辑软件拖拽排序插件vuedraggable的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

首先在某视频剪辑软件项目中，用npm包下载下来

npm安装vuedragable-S

下载下来后，引入插件，在你的某视频剪辑软件文件的脚本标签里面这样引入

从" vuedraggable "导入可拖动的

别忘了下面要注册组件

组件：{

可拖动的

},

然后就可以在模板标签里面使用了

draggable v-model= colors @ update= datadragEnd :options= { animation:500 }

过渡组

div v-for= element in colors :key= element。text class= drag-item

{{element.text}}

/div

/过渡-组

/可拖动

下面贴一下详细用法

模板

draggable v-model= colors @ update= datadragEnd :options= { animation:500 }

过渡组

div v-for= element in colors :key= element。text class= drag-item

{{element.text}}

/div

/过渡-组

/可拖动

/模板

脚本

从" vuedraggable "导入可拖动的

导出默认值{

data(){

返回{

消息：这是测试组件，

颜色：[

{

文字："海蓝宝石",

},

{

文本："粉红女郎",

},

{

文字："黄金",

},

{

文本："深红色",

},

{

文本："蓝紫色",

},

{

文本："浅蓝色",

},

{

文本："矢车菊蓝色",

},

{

文字："天蓝色",

},

{

文字："伯里伍德",

}

],

startArr:[]，

endArr:[]，

计数：0,

}

},

组件：{

可拖动的

},

方法：{

获取数据（事件){

控制台。日志(evt。拖动上下文。元素。正文)

},

datadragEnd (evt) {

evt。防止默认()；

console.log(拖动前的索引： evt.oldIndex)

console.log(拖动后的索引： evt.newIndex)

控制台。日志(这个。颜色)；

}

},

已安装(){

//为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效

文档。身体。ondrop=函数(事件){

事件。防止默认()；

事件。停止传播()；

}

}

}

/脚本

样式lang=scss 范围。测试{

边框：1px纯色# ccc

}。拖动项目{

宽度：200像素

高度：50px

行高：50px

边距：自动；

位置：相对；

背景：# ddd

边距-顶部：20px

}。ghostClass{

不透明度：1;

}。底部{

宽度：200像素

高度：50px

位置：相对；

背景：蓝色；

top:2px；

左：2px

过渡：全。5s线性；

}

/风格

下面是结果

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

vuedraggable:学习地址

sortable.js:学习地址

选择配置如下

var sortable=new Sortable(el，{

群组：名称，//或{姓名： . ，拉：[真，假，克隆]，放：[真，假，数组] }

sort: true，//在列表中排序

延迟：0，//以毫秒为单位的时间，用于定义排序开始的时间

touchStartThreshold: 0，//px，在取消延迟的拖动事件之前，指针应该移动多少像素

禁用：false，//如果设置为没错，则禁用可排序的。

store: null，//@see Store

动画：150，//ms，排序时移动项目的动画速度，` 0 —无动画

句柄：。我的句柄，//在列表项中拖动句柄选择器

筛选器：。忽略元素，//不会导致拖动的选择器（字符串或函数)

preventOnFilter: true，//触发过滤器时调用event.preventDefault()

可拖动：。项目，//指定元素内的哪些项应该是可拖动的

ghostClass: sortable-ghost ，//放置占位符的类名

已选择的类：“可排序的-已选择的”，//所选项的类名

dragClass: sortable-drag ，//拖动项的类名

dataIdAttr:数据标识，

forceFallback: false，//忽略HTML5 DnD行为并强制回退生效

fallbackClass: sortable-fallback ，//使用强制回退时克隆的数字正射影像图元素的类名

fallbackOnBody: false，//将克隆的数字正射影像图元素追加到文档正文中

fallbackTolerance: 0，//以像素为单位指定鼠标在被视为拖动之前应该移动的距离。

scroll: true，//或html元素

scrollFn: function(offsetX，offsetY，originalEvent，touchEvt，hoverTargetEl) {.},//如果您有自定义滚动条，滚动Fn可用于自动滚动

scrollSensitivity: 30，//px鼠标必须多靠近一条边才能开始滚动。

scrollSpeed: 10，//px

setData:函数(/** DataTransfer */dataTransfer，/** HTMLElement*/dragEl) {

dataTransfer.setData(Text ，dragel。文字内容)；//“数据传输”html 5拖动事件的对象

},

//元素被选择

选择时：函数(/* *事件*/事件){

evt。旧索引；//父元素中的元素索引

},

//元素拖动开始

onStart:函数(/* *事件*/事件){

evt。旧索引；//父元素中的元素索引

},

//元素拖动结束

onEnd: function (/**Event*/evt) {

var itemEl=evt.item//拖动的html元素

evt。到；//目标列表

evt.from//上一个列表

evt。旧索引；//元素在旧父元素中的旧索引

evt。新索引；//元素在新父元素中的新索引

},

//元素从另一个列表拖放到该列表中

onAdd: function (/**Event*/evt) {

//与竖着相同的属性

},

//更改了列表中的排序

更新：函数(/* *事件*/事件){

//与竖着相同的属性

},

//由列表的任何更改（添加/更新/移除)调用

on sort:function(/* * Event */evt){

//与竖着相同的属性

},

//元素从列表中移除到另一个列表中

删除时：函数(/* *事件*/事件){

//与竖着相同的属性

},

//尝试拖动已筛选的元素

on filter:function(/* * Event */evt){

var itemEl=evt.item//html元素接收"鼠标按下|点击开始"事件。

},

//当您在列表中或列表之间移动某项时，会引发

onMove: function (/**Event*/evt，/**Event*/originalEvent) {

//例如：http://jsbin.com/tuyafe/1/edit？js，输出

evt.dragged//拖动的html元素

evt.draggedRect//text rectangle {左上右下}

evt.related//html元素，其上有引导

evt.relatedRect//文本矩形

originalEvent.clientY//鼠标位置

//返回错误—用于取消

},

//创建元素的克隆时调用

onClone:函数(/* *事件*/事件){

var origEl=evt.item

var cloneEl=evt.clone

}

});

好了，今天的介绍就到这里啦，快去试试吧。

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