>因为要做一个拖拽排序的功能,便了解下拖拽框架的使用,网上一搜就可以看到有[vuedraggable](https://www.npmjs.com/package/vuedraggable)和 [awe-dnd](https://github.com/hilongjw/vue-dragging)。这两个是一个东西,不同的是,两个库的里面不同,一个是直接进行组件封装,一个是进行指令封装。
于是便同时安装了两个插件,看下区别
![vuedraggable的使用](https://upload-images.jianshu.io/upload_images/10886634-f67369c8e5981710.gif?imageMogr2/auto-orient/strip)
![awe-dnd的使用](https://upload-images.jianshu.io/upload_images/10886634-efe36eb8c8911253.gif?imageMogr2/auto-orient/strip)
----
- 从上图可以看出来,其实vuedraggable动画效果更好点,再其次vuedraggable的文档更多点,而且github上有一些用法的代码
- 这个两个文档都很少,一些用法要自己去找研究,不太友好,唯一庆幸的是vuedraggable有例子
一开始看文档把代码粘贴上去,并没有上图的拖拽动画效果,后面看例子,才知道且将可拖动元素放进了 transition-group 下面才有过渡动画, awe-dnd也是一样。
----
#####指定点击某块才能拖拽
![3.gif](https://upload-images.jianshu.io/upload_images/10886634-b8217a08e7fbc2d3.gif?imageMogr2/auto-orient/strip)
设置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>
```