因为马上要做一个拖拽排序的功能，便先来了解下拖拽框架的使用，网上一搜就可以看到有vuedraggable和 awe-dnd。这两个是一个东西，不同的是，两个库的里面不同，一个是直接进行组件封装，一个是进行指令封装。
于是便同时安装了两个插件，看下区别
vuedraggable的使用
awe-dnd的使用
从上图可以看出来，其实vuedraggable动画效果更好点，再其次vuedraggable的文档更多点，而且github上有一些用法的代码
这个两个文档都很少，一些用法要自己去找研究，不太友好，唯一庆幸的是vuedraggable有例子
一开始看文档把代码粘贴上去，并没有上图的拖拽动画效果，后面看例子，才知道且将可拖动元素放进了 transition-group 下面才有过渡动画, awe-dnd也是一样。
指定点击某块才能拖拽
3.gif
设置handle就可以指定, 如果不想指定可以去掉，具体代码如下
<template>
<div class="container">
<h3>Draggable</h3>
<draggable tag="ul"
:list="list"
v-bind="dragOptions"
class="list-group"
handle=".handle"
@start="drag = true"
@end="drag = false">
<transition-group type="transition"
:name="!drag ? 'flip-list' : null">
<li class="list-group-item"
v-for="(element, idx) in list"
:key="element.name">
<span class="handle">拖</span>
<span class="text">{{ element.name }} </span>
<span class="close"
@click="removeAt(idx)">删</span>
</li>
</transition-group>
</draggable>
<button class="btn btn-secondary button"
@click="add">新增</button>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "draggable-template",
components: {
draggable
},
data () {
return {
list: [
{ name: "John0", text: "", id: 0 },
{ name: "Joao1", text: "", id: 1 },
{ name: "Jean2", text: "", id: 2 },
{ name: "Jean3", text: "", id: 3 },
{ name: "Jean4", text: "", id: 4 }
],
drag: false
};
},
computed: {
dragOptions () {
return {
animation: 200, // 动画时间
disabled: false, // false可拖拽，true不可拖拽
group: "description",
ghostClass: "ghost"
};
}
},
methods: {
removeAt (idx) {
this.list.splice(idx, 1);
},
add () {
let i = this.list.length
this.list.push({ name: "Juan " + i, id: i, text: "" });
}
}
};
</script>
<style lang="scss" scoped>
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
.container {
width: 100%;
text-align: center;
.handle {
cursor: move;
}
.list-group {
margin-bottom: 50px;
.list-group-item {
display: flex;
justify-content: space-between;
padding: 0 10px;
border: 1px solid #ccc;
height: 40px;
line-height: 40px;
width: 300px;
text-align: center;
color: #fff;
background: rgba(0, 0, 0, 0.6);
}
}
}
</style>
awe-dnd 的示例如下
<template>
<div class="color-list">
<h3>Draggable</h3>
<transition-group type="transition"
:name="!drag ? 'flip-list' : null">
<div class="color-item"
v-for="color in colors"
v-dragging="{ item:color,list:colors }"
:key="color.text">{{color.text}}</div>
</transition-group>
</div>
</template>
<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine 1"
}, {
text: "Hotpink 2"
}, {
text: "Gold 3"
}, {
text: "Crimson 4"
}, {
text: "Blueviolet 5"
}, {
text: "Lightblue 6"
}, {
text: "Cornflowerblue 7"
}, {
text: "Skyblue 8"
}, {
text: "Burlywood 9"
}]
}
},
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', (res) => {
console.error(res);
})
}
}
</script>
<style lang="scss" scoped>
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
.color-list {
text-align: center;
.color-item {
cursor: move;
border: 1px solid #ccc;
height: 40px;
line-height: 40px;
width: 200px;
text-align: center;
}
}
</style>
再次更新2020/10/22
注意：
1.两个 draggable 节点中, group 的 name 是一样的, 这样就可以实现两个区域的相互拖拽.
- draggable 节点中加上 :sort='false' 不能拖动排序
3.draggable 节点中, group 添加 put: false, 不能从另一个数组中拖回来
- 点击删除后, 按原顺序回到原数组中，, 从 collections 数组中删除, 通过计算属性 notCollectedMenus
来添加到下面的区域.
<draggable
:group='{name: "menu", put: true}'
:sort='false'
:value="collections"
...>
...
</draggable>
...
computed: {
notCollectedMenus: function () {
return this.list2.filter(item=> {
let obj = this.list1.find(ele=> ele.id === item.id)
return obj == undefined ? true : false
})
},
},
...
