这篇文章主要为大家详细介绍了某视频剪辑软件拖拽排序插件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
}
});
好了，今天的介绍就到这里啦，快去试试吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。