简单的记录一下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>
以上代码可实现基础的拖拽功能以及事件处理