vue.draggable,vue-draggable
这篇文章主要为大家详细介绍了如何利用某视频剪辑软件中的可拖动的插件实现多选拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
前言实现思路演示全部代码演示实现效果
前言
最近产品提出一个排序需求，希望能进行拖拽排序，我一想，vue2插件这么多，sortable.js、draggable分分钟实现了，但是还有一个需求希望能够实现多选拖拽，这个就有点麻烦，查询了许多资料，暂时没有发现能够多选的拖拽组件，如果自己写一个，既耗费时间，实现效果上必然没有可拖动的这种成熟轮子效果好，于是决定基于可拖动的做改进。
实现思路
我们知道可拖动的插件只要设置相同的组名字就能实现分组拖拽，如果我们渲染两个同名分组，控制第二个分组的显示与隐藏，鱼目混珠，就能实现简单的多选拖拽效果
1.通过group="task"设置两个同名分组，同时利用draggable=".card"属性，控制class名称，禁止单选
draggable group= task v-model= dataList @ end= dragger end class=
:class=show？ order-box-show : order-box animation= 300 draggable= .卡片
过渡组
div v-for=(item，index)in dataList :key= index class= box @ click= handle select(index)
:class=item.select show？名片：“{{ item.name }}
/div
/过渡-组
/可拖动
div class= position v-show= show
draggable group= task v-model= datalist 2 @ end= dragger end class= order-box animation= 300
过渡组
数据列表2中的div v-for=(item，index :key= index class= boxs
差异
{{ item.name }}
/div
/div
/过渡-组
/可拖动
2.通过v-show="show"控制第二个分组的隐藏与展示，同时对数据做处理，并且在拖拽结束后，要在分组一中找到分组二拖拽过来的初始元素删掉
const查找索引=this。数据表。查找索引((item=item。name===选中元素展示区))
this.dataList.splice(findIndex，1)
Demo全部代码
模板
差异
差异
draggable group= task v-model= dataList @ end= dragger end class=
:class=show？ order-box-show : order-box animation= 300 draggable= .卡片
过渡组
div v-for=(item，index)in dataList :key= index class= box @ click= handle select(index)
:class=item.select show？名片：“{{ item.name }}
/div
/过渡-组
/可拖动
div class= position v-show= show
draggable group= task v-model= datalist 2 @ end= dragger end class= order-box animation= 300
过渡组
数据列表2中的div v-for=(item，index :key= index class= boxs
差异
{{ item.name }}
/div
/div
/过渡-组
/可拖动
/div
/div
El-button style= margin left:50px @ click= handle start 确认/el-button
/div
/模板
脚本
从" vuedraggable "导入可拖动的
导出默认值{
组件：{
可拖动的
},
data() {
返回{
数据列表：[
],
数据列表2: [{名称：选中元素展示区 }],
秀：假的，
selectArr: []，
}
},
已安装(){
for(var I=0；i 60i ) {
this.dataList.push({ name: i，select: false })
}
},
方法：{
手柄选择(索引){
const data=JSON。解析(JSON。stringify(这个。数据表))
数据[索引]。选择=真
this.selectArr.push({.数据[索引] })
这个。datalist=JSON。解析(JSON。stringify(数据))
},
手柄启动(e) {
如果(!这个。选择一个。长度){
返回
}
this.show=true
this.selectArr.forEach((item，index)={
常量索引=this。数据表。查找索引(it=item。name===it。姓名)
this.dataList.splice(索引，1)
})
},
拖曳线
const newIndex=e.newIndex
this.dataList.splice(newIndex，0，this.selectArr)
const查找索引=this。数据表。查找索引((item=item。name===选中元素展示区))
this.dataList.splice(findIndex，1)
this.show=false
},
}
}
/脚本
样式lang=scss 范围。订单箱{
填充：20像素50像素
显示器：flex
柔性包装：缠绕；
跨度{
flex:1；
显示器：flex
柔性包装：缠绕；
}。方框{
宽度：100像素
高度：50px
背景：rgb(7，174，215)；
右边距：10px
边距-底部：10px
}。盒子{
宽度：100像素
高度：50px
背景：rgb(215，177，7)；
右边距：10px
边距-底部：10px
}。卡片{
背景：rgb(128，68，0)！重要；
}
}。订单箱-显示{
填充：20像素50像素
显示器：flex
柔性包装：缠绕；
跨度{
flex:1；
显示器：flex
柔性包装：缠绕；
}。方框{
宽度：100像素
高度：50px
背景：rgb(7，174，215)；
右边距：10px
边距-底部：10px
}。盒子{
宽度：100像素
高度：50px
背景：rgb(215，177，7)；
右边距：10px
边距-底部：10px
}
}。位置{
边框：1px纯红；
位置：固定；
top:50%；
左：50%;
transform: translate(-50%，-50%)；
光标：指针；
}
/风格
Demo实现效果
到此这篇关于某视频剪辑软件利用可拖动的实现多选拖拽效果的文章就介绍到这了，更多相关某视频剪辑软件可拖动多选拖拽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。