vuedraggable拖拽,VUE实现拖拽
这篇文章主要为大家详细介绍了vuedraggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vuedraggable实现拖拽功能的具体代码，供大家参考，具体内容如下
项目需求
简单实现一个某视频剪辑软件拖拽小案例，右侧选项区拖拽到左侧目标区域，拖动成功的不能再次拖动，并改变颜色。
安装 vuedraggable 插件
cnpm i -S vuedraggable
页面直接引用
从" vuedraggable "导入可拖动的
…
组件：{可拖动},
源码参考
模板
div class=容器
div class=内容
div class=targetContent
可拖动的
:列表=结果列表
group=article
:disabled="disabled "
@start=targetStart
@end=targetEnd
class=targetCard
style=height: 100px
差异
v-for=结果列表中的结果列表
:key=resultlists.id
class=列表-完成-项目
div class= list-complete-item-handle“{结果列表。name } }/div
/div
/可拖动
/div
div class=optionsContent
可拖动的
:list=targetLists
：选项={
组：{ name: optionsName，pull: clone }，
排序：假，
}
筛选器=。不可绘制
@end=optionEnd
class=dragArea
差异
v-for=目标列表中的目标列表
:key=targetList.id
:class= { un draggable:目标列表。标志}
class=列表-完成-项目
div class= list-complete-item-handle 2“{ target list。name } }/div
/div
/可拖动
/div
/div
/div
/模板
脚本
从" vuedraggable "导入可拖动的
导出默认值{
名称： DndList ，
组件：{可拖动},
观察：{},
data() {
返回{
选项名称："文章",
禁用：假，
结果列表：[],
目标列表：[
{ id: 1，姓名： 平板支撑 },
{ id: 2，姓名： 俄挺 },
{ id: 3，姓名： 空中自行车 },
{ id: 4，姓名： 波比 },
{ id: 5，姓名： 两头起摸脚 },
{ id: 6，姓名： 窄距俯卧撑 },
{ id: 7，姓名： 宽距俯卧撑 },
{ id: 8，姓名： 钻石俯卧撑 },
{ id: 9，姓名： 空中击掌俯卧称 },
{ id: 10，姓名： 深蹲提膝跳 },
],
};
},
已计算：{},
方法：{
//右侧拖拽结束事件
可选端（电动汽车)
//如果拖拽目标区域和左侧区域的名字一致，允许拖拽，并改变状态
如果(ev。敬。class name===目标卡){
这个. set $这个。目标列表[ev。旧索引]， flag ，true)；
}
},
//左侧区域开始拖动事件（修改右侧区域的名字，不一致的话拖动失败)
targetStart() {
this.optionsName= 1111
},
//拖动结束时，把右侧区域的名字恢复
targetEnd() {
this.optionsName=文章
},
},
};
/脚本
style lang=less 范围。容器{
宽度：100%;
身高：100%;
背景色：rgba(5，35，56，0.6)；
显示器：flex
对齐-项目：居中；
对齐-内容：居中；内容{
宽度：1200像素
高度：600像素
背景色：# 052338;
//margin:120 px auto auto；
显示器：flex。目标内容{
宽度：100%;
身高：100%;
}。选项内容{
宽度：100%;
身高：100%;
左边边框：2px纯色# 4ab 7bd
}
}
}。列表-完成-项目{
显示：内嵌-块；
字体大小：16px
字体粗细：400;
颜色：# ffffff
填充：10px 18px
边距：10px 8px 0；
背景：rgba(237，245，255，0.1)；
边框：1px固体# bfcbd9
边框半径：0.18雷姆；
光标：指针；
过渡：全1;
}。列表-完成-项目。可排序选择的{
背景：# 4 ab 7 BD
}。列表-完整-项目。可排序-幽灵
背景：# 30b08f
}。不可绘制{
背景色：rgb(143，233，233)；
}。列表-完成-输入，列表-完成-保留-活动{
不透明度：0;
}
/风格
常用事件
@start=startChange //开始拖动元素触发的事件
@end=endChange //拖动元素以结束触发的事件。
常用属性配置
:选项={
Group: {name: optionsname，pull: clone}，//同一组子元素可以互相拖动。
Sort: false，//是否禁止拖动排序？
Disabled: false，//如果设置为true，则禁用可排序。
动画：150，//ms，运动物品排序时的动画速度， 0 -无动画。
筛选器：。 ignore-elements ，//不会导致拖放的选择器(字符串或函数)
可拖动：。item ，//指定元素中的哪些项应该是可拖动的。
GhostClass: sortable-ghost ，//为被拖动元素的类设置占位符的类名。
choosed class: sortable-chosen ，//设置所选元素的类。
DragClass: sortable-drag ，//拖动元素的类。
}
注意事项
1.被拖动的时间元素会失去其样式。
选项区域和目标区域的元素样式不一致。
2.拖动失败。
选项区域的名称与目标区域的名称不一致，这将导致拖动失败。
3.控制台报告提示(props已弃用，直接添加可排序选项asvue。可拖动项目，或使用v-bind …)
版本问题，options={} 已经被放弃了，所以直接用v-bind写。详情请参考简介。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。