1.vuedraggable
vuedraggable
组件式封装,并且将可拖动元素放进了 transition-group
上面,过渡动画都比较好。
//下载
npm i -S vuedraggable
//引入
import draggable from 'vuedraggable'
//注册
components: { draggable },
//使用
//html
<vuedraggable class="wrapper" v-model="list">
<transition-group>
<div v-for="item in list" :key="item" class="item">
<p>{{item}}</p>
</div>
</transition-group>
</vuedraggable>
//js
data() {
return {
list: [1,2,34,4,54,5]
}
},
2.vue-dragging
封装了 v-dragging
全局指令,然后通过全局指令去数据绑定等。
awe-dnd 是没有双向绑定, 因此提供了事件,在拖拽结束的时候用来更新列表或者是去触发父组件监听的事件
//下载
npm install awe-dnd --save
//引入
import VueDND from 'awe-dnd'
//注册
Vue.use(VueDND)
//使用
//html
// item 就是单个对象,而 list 则是数据列表,group 则是用来声明一个组,来保证可以在一个页面中进行多个数据源的操作。
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>
//js
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Hotpink"
}, {
text: "Gold"
}, {
text: "Crimson"
}, {
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
},
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);
})
}
3.vue-drag-drop
//下载
npm install --save vue-drag-drop
//引入
import VueDragDrop from 'vue-drag-drop'
//注册
Vue.use(VueDragDrop)
//使用
//html
//drag 可拖动元素
<drag
v-show="whereUtil === false"
:transfer-data="{ whereDrag }"
style="display:inline;margin-right:15px"
>
<el-button id="where" type="primary" plain>WHERE</el-button>
</drag>
// drop可拖动的元素允许被拖到这个位置
<drop @drop="handleDrop">
<div
id="queryArea"
class="input"
draggable
style="width: 90%;"
>
<el-col v-show="whereUtil === true">
<span>WHERE </span>
<el-input
v-model="whereValue"
style="width:70%"
clearable
/>
</el-col>
</div>
</drop>
//js
data(){
return{
// 数据
whereValue: '',
whereDrag: '', // where拖動
whereUtil: false
}
},
methods:{
handleDrop(data, event) {
// data获取到拖动元素的数据,key为:transfer-data中的值
const value = Object.keys(data).join()
if (value === 'whereDrag') {
this.whereUtil = true
}
}
}
4.vue-slicksort
//下载
npm install vue-slicksort --save
//引入
import { SlickList, SlickItem } from 'vue-slicksort'
//注册
components: {
SlickItem,
SlickList
},
//使用
//html
<div class="root1">
<SlickList
:lockToContainerEdges="true"
axis="x"
lockAxis="x"
v-model="items"
class="SortableList"
@input="getChangeLists"
>
<SlickItem
v-for="(item, index) in items"
class="SortableItem"
:index="index"
:key="index"
>
<div class="item-name">{{ item.name }}</div>
<div class="root2">
<SlickList
:lockToContainerEdges="true"
class="list"
lockAxis="y"
v-model="item.itemArr"
>
<SlickItem
class="list-item"
v-for="(item, index) in item.itemArr"
:index="index"
:key="index"
>
{{ item }}
</SlickItem>
</SlickList>
</div>
</SlickItem>
</SlickList>
</div>
//js
data() {
return {
flag: true,
items: [
{
name: 'Tab-1',
itemArr: ['1-1', '1-2', '1-3']
},
{
name: 'Tab-2',
itemArr: ['2-1', '2-2', '2-3']
},
{
name: 'Tab-3',
itemArr: ['3-1', '3-2', '3-3']
}
]
}
},
methods: {
getChangeLists(vals) {
console.log(vals, 'vals')
}
}