vue-draggable,vue 实现拖拽插件
这篇文章主要为大家详细介绍了VUE使用可拖动的实现组件拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了可拖动的组件拖拽实例，供大家参考，具体内容如下
实现步骤
1、导入draggable依赖
NPM岛
2、引入draggable
从" vuedraggable "导入可拖动的
3、注册draggable
组件：{
可拖动的
},
4、使用draggable
超文本标记语言页面
div class=col-md-3
可拖动的
class=list-group
tag=ul
:list=this.list
v-bind=dragOptions
:move=onMove
@start=isDragging=true
@end=isDragging=false
差异
class=列表-组-项目
v-for=(item，index) in this.list
:key=item.value
span class= badge“{ index } }/span
span class=lefttitle
{{ item.name }}
/span
/div
/可拖动
/div
定义属性和目录
data() {
返回{
列表：[
{
名称：-姓名，
值："名称",
},
{
名称：-性别，
价值：性，
},
{
名称：-年龄，
值："年龄",
},
{
名称：-地址，
值："地址",
},
{
名称：-邮箱，
值："邮箱",
},
],
editable: true，//决定是否可拖动，为错误的则组件不可拖动
正在分段：假，
};
},
定义移动方法
方法：{
onMove({ relatedContext，draggedContext }) {
const相关元素=相关上下文。元素；
const拖动元素=拖动上下文。元素；
返回（
(!relatedElement ！relatedElement.fixed)！已修复
);
},
},
5、完整VUE代码
模板
div class=流体容器
窗体-组窗体-组-LG面板面板-默认
div class=面板标题
h3 class=panel-title 组件拖拽实例/h3
/div
div class=面板-正文
div class=复选框
标签
输入类型=复选框v-model=可编辑/设置组件可拖拽/标签
/div
/div
/div
div class=col-md-3
可拖动的
class=list-group
tag=ul
:list=this.list
v-bind=dragOptions
:move=onMove
@start=isDragging=true
@end=isDragging=false
差异
class=列表-组-项目
v-for=(item，index) in this.list
:key=item.value
span class= badge“{ index } }/span
span class=lefttitle
{{ item.name }}
/span
/div
/可拖动
/div
div class=list-group col-md-3
pre{{ listString }}/pre
/div
/div
/模板
脚本
从" vuedraggable "导入可拖动的
导出默认值{
组件：{
可拖动，
},
data() {
返回{
列表：[
{
名称：-姓名，
值："名称",
},
{
名称：-性别，
价值：性，
},
{
名称：-年龄，
值："年龄",
},
{
名称：-地址，
值："地址",
},
{
名称：-邮箱，
值："邮箱",
},
],
列表2: [],
editable: true，//决定是否可拖动，为错误的则组件不可拖动
正在分段：假，
延迟拖动：假，
};
},
方法：{
onMove({ relatedContext，draggedContext }) {
const相关元素=相关上下文。元素；
const拖动元素=拖动上下文。元素；
返回（
(!relatedElement ！relatedElement.fixed)！已修复
);
},
},
计算值：{
dragOptions() {
返回{
动画：0,
群组：描述，
禁用：this .可编辑
幽灵类："幽灵",
};
},
listString() {
返回JSON.stringify(this.list，null，2)；
},
},
观察：{
正在分段(新值){
如果(新值){
this.delayedDragging=true
返回；
}
这个. nextTick(()={
this.delayedDragging=false
});
},
},
};
/脚本
风格。翻转-列表-移动{
过渡：变换0.5s
}。禁止移动{
过渡：转换0s；
}。幽灵{
不透明度：0.5;
背景：# c 8 ebfb；
}。列表-组{
最小高度：20px
}。列表-组-项目{
光标：移动；
}。列表-组-项目i {
光标：指针；
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。