因?yàn)轳R上要做一個(gè)拖拽排序的功能绑谣，便先來(lái)了解下拖拽框架的使用细移，網(wǎng)上一搜就可以看到有vuedraggable和 awe-dnd。這兩個(gè)是一個(gè)東西且警，不同的是粉捻，兩個(gè)庫(kù)的里面不同，一個(gè)是直接進(jìn)行組件封裝振湾，一個(gè)是進(jìn)行指令封裝杀迹。
于是便同時(shí)安裝了兩個(gè)插件亡脸，看下區(qū)別
vuedraggable的使用
awe-dnd的使用
從上圖可以看出來(lái)押搪，其實(shí)vuedraggable動(dòng)畫效果更好點(diǎn)，再其次vuedraggable的文檔更多點(diǎn)浅碾，而且github上有一些用法的代碼
這個(gè)兩個(gè)文檔都很少大州，一些用法要自己去找研究，不太友好垂谢，唯一慶幸的是vuedraggable有例子
一開始看文檔把代碼粘貼上去厦画，并沒有上圖的拖拽動(dòng)畫效果，后面看例子滥朱，才知道且將可拖動(dòng)元素放進(jìn)了 transition-group 下面才有過(guò)渡動(dòng)畫, awe-dnd也是一樣根暑。
指定點(diǎn)擊某塊才能拖拽
3.gif
設(shè)置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, // 動(dòng)畫時(shí)間
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.兩個(gè) draggable 節(jié)點(diǎn)中, group 的 name 是一樣的, 這樣就可以實(shí)現(xiàn)兩個(gè)區(qū)域的相互拖拽.
- draggable 節(jié)點(diǎn)中加上 :sort='false' 不能拖動(dòng)排序
3.draggable 節(jié)點(diǎn)中, group 添加 put: false, 不能從另一個(gè)數(shù)組中拖回來(lái)
- 點(diǎn)擊刪除后, 按原順序回到原數(shù)組中排嫌，, 從 collections 數(shù)組中刪除, 通過(guò)計(jì)算屬性 notCollectedMenus
來(lái)添加到下面的區(qū)域.
<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
})
},
},
...
