vuedraggable实现拖拽功能
本文实例为大家分享了vuedraggable实现拖拽功能的具体代码，供大家参考，具体内容如下
简单实现一个vue拖拽小案例，右侧选项区拖拽到左侧目标区域，拖动成功的不能再次拖动，并改变颜色。
安装 vuedraggable 插件cnpm i -S vuedraggable
页面直接引用
import draggable from “vuedraggable”;
…
components: { draggable },
源码参考
<template>
<div class="container">
<div class="content">
<div class="targetContent">
<draggable
:list="resultlists"
group="article"
:disabled="disabled"
@start="targetStart"
@end="targetEnd"
class="targetCard"
style="height: 100px"
>
<div
v-for="resultlists in resultlists"
:key="resultlists.id"
class="list-complete-item"
>
<div class="list-complete-item-handle">{{ resultlists.name }}</div>
</div>
</draggable>
</div>
<div class="optionsContent">
<draggable
:list="targetLists"
:options="{
group: { name: optionsName, pull: 'clone' },
sort: false,
}"
filter=".undraggable"
@end="optionEnd"
class="dragArea"
>
<div
v-for="targetList in targetLists"
:key="targetList.id"
:class="{ undraggable: targetList.flag }"
class="list-complete-item"
>
<div class="list-complete-item-handle2">{{ targetList.name }}</div>
</div>
</draggable>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "DndList",
components: { draggable },
watch: {},
data() {
return {
optionsName: "article",
disabled: false,
resultlists: [],
targetLists: [
{ id: 1, name: "平板支撑" },
{ id: 2, name: "俄挺" },
{ id: 3, name: "空中自行车" },
{ id: 4, name: "波比" },
{ id: 5, name: "两头起摸脚" },
{ id: 6, name: "窄距俯卧撑" },
{ id: 7, name: "宽距俯卧撑" },
{ id: 8, name: "钻石俯卧撑" },
{ id: 9, name: "空中击掌俯卧称" },
{ id: 10, name: "深蹲提膝跳" },
],
};
},
computed: {},
methods: {
// 右侧拖拽结束事件
optionEnd(ev) {
// 如果拖拽目标区域和左侧区域的 name 一致，允许拖拽，并改变状态
if (ev.to.className === "targetCard") {
this.$set(this.targetLists[ev.oldIndex], "flag", true);
}
},
// 左侧区域开始拖动事件（修改右侧区域的名字，不一致的话拖动失败）
targetStart() {
this.optionsName = "1111";
},
// 拖动结束时，把右侧区域的名字恢复
targetEnd() {
this.optionsName = "article";
},
},
};
</script>
<style lang="less" scoped>
.container {
width: 100%;
height: 100%;
background-color: rgba(5, 35, 56, 0.6);
display: flex;
align-items: center;
justify-content: center;
.content {
width: 1200px;
height: 600px;
background-color: #052338;
// margin: 120px auto auto;
display: flex;
.targetContent {
width: 100%;
height: 100%;
}
.optionsContent {
width: 100%;
height: 100%;
border-left: 2px solid #4ab7bd;
}
}
}
.list-complete-item {
display: inline-block;
font-size: 16px;
font-weight: 400;
color: #ffffff;
padding: 10px 18px;
margin: 10px 8px 0;
background: rgba(237, 245, 255, 0.1);
border: 1px solid #bfcbd9;
border-radius: 0.18rem;
cursor: pointer;
transition: all 1s;
}
.list-complete-item.sortable-chosen {
background: #4ab7bd;
}
.list-complete-item.sortable-ghost {
background: #30b08f;
}
.undraggable {
background-color: rgb(143, 233, 233);
}
.list-complete-enter,
.list-complete-leave-active {
opacity: 0;
}
</style>
常用事件
@start = "startChange" // 开始拖动元素触发的事件
@end= "endChange" // 拖动元素结束触发的事件
常用属性配置
:options="{
group: { name: optionsName, pull: 'clone' }, // name 相同的集合子元素可以互相拖动
sort: false, // 是否禁止拖动排序
disabled: false, // 如果设置为真，则禁用sortable。
animation: 150, // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数)
draggable: ".item", // 指定元素中的哪些项应该是可拖动的。
ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。
chosenClass: "sortable-chosen", // 设置被选中的元素的class
dragClass: "sortable-drag", //拖动元素的class。
}"
注意事项
1、拖动的时间元素失去样式
选项区域和目标区域的元素样式不一致
2、拖动失败
选项区域和目标区域的名字不一致，会导致拖动失败
3、控制台报提示（ props is deprecated, add sortable options directly as vue.draggable item, or use v-bind…）
插件版本问题，:options="{}" 的写法已经被弃用，直接使用 v-bind 写法，具体参照介绍