这篇文章主要讲解了“VUE怎么使用draggable实现组件拖拽”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“VUE怎么使用draggable实现组件拖拽”吧！
实现步骤
1、导入draggable依赖
npm i -S vuedraggable
2、引入draggable
import draggable from "vuedraggable"
3、注册draggable
components: {
draggable
},
4、使用draggable
html页面
<div class="col-md-3">
<draggable
class="list-group"
tag="ul"
:list="this.list"
v-bind="dragOptions"
:move="onMove"
@start="isDragging = true"
@end="isDragging = false"
>
<div
class="list-group-item"
v-for="(item, index) in this.list"
:key="item.value"
>
<span class="badge">{{ index }}</span>
<span class="lefttitle">
{{ item.name }}
</span>
</div>
</draggable>
</div>
定义属性和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代码
<template>
<div class="fluid container">
<div class="form-group form-group-lg panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">组件拖拽实例</h4>
</div>
<div class="panel-body">
<div class="checkbox">
<label
><input type="checkbox" v-model="editable" />设置组件可拖拽</label
>
</div>
</div>
</div>
<div class="col-md-3">
<draggable
class="list-group"
tag="ul"
:list="this.list"
v-bind="dragOptions"
:move="onMove"
@start="isDragging = true"
@end="isDragging = false"
>
<div
class="list-group-item"
v-for="(item, index) in this.list"
:key="item.value"
>
<span class="badge">{{ index }}</span>
<span class="lefttitle">
{{ item.name }}
</span>
</div>
</draggable>
</div>
<div class="list-group col-md-3">
<pre>{{ listString }}</pre>
</div>
</div>
</template>
<script>
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;
});
},
},
};
</script>
<style>
.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;
}
</style>
感谢各位的阅读，以上就是“VUE怎么使用draggable实现组件拖拽”的内容了，经过本文的学习后，相信大家对VUE怎么使用draggable实现组件拖拽这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是本站，小编将为大家推送更多相关知识点的文章，欢迎关注！
