How to use draggable to implement component drag and drop in VUE
这篇文章主要讲解了"VUE怎么使用draggable实现组件拖拽"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"VUE怎么使用draggable实现组件拖拽"吧!
实现步骤
1、导入draggable依赖
npm i -S vuedraggable
2、引入draggable
import draggable from "vuedraggable"
3、注册draggable
components: {
draggable
},
4、使用draggable
html页面
{{ index }}
{{ item.name }}
定义属性和list
data() {
return {
list: [
{
name: "-姓名",
value: "name",
},
{
name: "-性别",
value: "sex",
},
{
name: "-年龄",
value: "age",
},
{
name: "-地址",
value: "address",
},
{
name: "-邮箱",
value: "mailbox",
},
],
editable: true, //决定是否可拖动，为false则组件不可拖动
isDragging: false,
};
},
定义移动方法
methods: {
onMove({ relatedContext, draggedContext }) {
const relatedElement = relatedContext.element;
const draggedElement = draggedContext.element;
return (
(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
);
},
},
5、完整VUE代码
组件拖拽实例
设置组件可拖拽
{{ index }}
{{ item.name }}
{{ listString }}
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
list: [
{
name: "-姓名",
value: "name",
},
{
name: "-性别",
value: "sex",
},
{
name: "-年龄",
value: "age",
},
{
name: "-地址",
value: "address",
},
{
name: "-邮箱",
value: "mailbox",
},
],
list2: [],
editable: true, //决定是否可拖动，为false则组件不可拖动
isDragging: false,
delayedDragging: false,
};
},
methods: {
onMove({ relatedContext, draggedContext }) {
const relatedElement = relatedContext.element;
const draggedElement = draggedContext.element;
return (
(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
);
},
},
computed: {
dragOptions() {
return {
animation: 0,
group: "description",
disabled: !this.editable,
ghostClass: "ghost",
};
},
listString() {
return JSON.stringify(this.list, null, 2);
},
},
watch: {
isDragging(newValue) {
if (newValue) {
this.delayedDragging = true;
return;
}
this.$nextTick(() => {
this.delayedDragging = false;
});
},
},
};
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.list-group {
min-height: 20px;
}
.list-group-item {
cursor: move;
}
.list-group-item i {
cursor: pointer;
}
感谢各位的阅读，以上就是"VUE怎么使用draggable实现组件拖拽"的内容了，经过本文的学习后，相信大家对VUE怎么使用draggable实现组件拖拽这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注!
