简单的记录一下vuedraggable拖拽组件的基础使用
话不多说直接上代码
一、通过npm安装组件
npm install vuedraggable二、在页面中的注册以及基础使用
①直接使用
<template>
<div>
<draggable>
<div v-for="item in myArray">{
{item.name}}</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
data() {
return {
myArray: [{
name: '我的'
}, {
name: '你的'
}],
}
},
components: {
draggable
},
methods: {
}
}
</script>
②采用组的形式
<template>
<div>
<draggable v-model="myArray">
<transition-group>
<div v-for="(item,index) in myArray" :key="index"
style="height: 100px;margin-top: 10px;background-color: pink;">{
{item.name}}</div>
</transition-group>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
data() {
return {
myArray: [{
name: 1
}, {
name: 2
}, {
name: 3
}, {
name: 4
}]
}
},
components: {
draggable
},
methods: {
}
}
</script>
以上代码就可以实现一个简单的拖拽排序
二、如果是对层级的数组实现拖拽，实现原理则相同，话不多说直接上代码
<template>
<div>
<draggable v-model="myArray">
<transition-group>
<div v-for="(item,index) in myArray" :key="index"
style="margin-top: 10px;background-color: pink;padding: 0 50px;">
<div style="line-height: 100px;font-weight: 700;">{
{item.name}}</div>
<draggable v-model="item.children">
<transition-group>
<div v-for="(a,b) in item.children" :key='b'
style="line-height: 30px;background-color: aqua;margin-top: 10px;">{
{a.name}}</div>
</transition-group>
</draggable>
</div>
</transition-group>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
data() {
return {
myArray: [{
name: '我的',
children: [{
name: 1
}, {
name: 2
}, {
name: 3
}]
}, {
name: '你的',
children: [{
name: 4
}, {
name: 5
}, {
name: 6
}]
}]
}
},
components: {
draggable
},
methods: {
}
}
</script>
<
三、如果在拖拽的开始和拖拽放下后需要进行逻辑处理，或者触发其他事件等等，则可以通过绑定事件，@dragstart（拖拽开始） @dragend（拖拽放下），由于层级问题，子容器拖拽事件会触发父容器事件，则需要阻止事件的冒泡.stop话不多说直接上代码
<template>
<div>
<draggable v-model="myArray">
<transition-group>
<div v-for="(item,index) in myArray" :key="index"
style="margin-top: 10px;background-color: pink;padding: 0 50px;" @dragend="outerDragend()"
@dragstart="outerDragstart()">
<div style="line-height: 100px;font-weight: 700;">{
{item.name}}</div>
<draggable v-model="item.children">
<transition-group>
<div v-for="(a,b) in item.children" :key='b' @dragend.stop="innerDragend()"
@dragstart.stop="innerDragstart()"
style="line-height: 30px;background-color: aqua;margin-top: 10px;">{
{a.name}}
</div>
</transition-group>
</draggable>
</div>
</transition-group>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
data() {
return {
myArray: [{
name: '我的',
children: [{
name: 1
}, {
name: 2
}, {
name: 3
}]
}, {
name: '你的',
children: [{
name: 4
}, {
name: 5
}, {
name: 6
}]
}]
}
},
components: {
draggable
},
methods: {
// 外层放下
outerDragend() {
console.log('外层放下')
},
// 外层开始
outerDragstart() {
console.log('外层开始')
},
// 内层开始
innerDragstart() {
console.log('内层开始')
},
// 内层放下
innerDragend() {
console.log('内层放下')
},
}
}
</script>
以上代码可实现基础的拖拽功能以及事件处理