这篇文章主要为大家详细介绍了VUE使用draggable实现组件拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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">
<h3 class="panel-title">组件拖拽实例</h3>
</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拖拽组件vuedraggable使用说明详解
- 使用vuedraggable实现从左向右拖拽功能
- vue3使用vuedraggable实现拖拽功能
- vuedraggable实现拖拽功能
- vuedraggable实现简单拖拽功能
- vuedraggable+element ui实现页面控件拖拽排序效果
- 利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
- Vue.Draggable拖拽功能的配置使用方法
- Vue.Draggable实现拖拽效果
- Vue draggable实现从左到右拖拽功能
