一、安装vuedraggable
npm install vuedraggable
yarn add vuedraggable
二、引入
//在需要使用的页面导入
import draggable from "vuedraggable";
//组件注册
components: {
draggable
}
三、效果示例
拖动前
拖动时
拖动后
<template>
<div class="home">
<div class="drag">{{ drag ? 'dragging' : 'dragged' }}</div>
<div>list1</div>
<!-- delay:响应时间 animation:过渡时间 group:组名(组名相同可多列拖动) -->
<draggable delay="1000" v-model="array" @start="onStart" chosen-class="chosen" force-fallback="true" group="group"
@end="onEnd" class="Li" animation="1000">
<transition-group class="list">
<div class="item" v-for="(item, index) of array" :key="item.state + '_' + index">{{ item.name }}</div>
</transition-group>
</draggable>
<div>list2</div>
<draggable delay="1000" v-model="array1" @start="onStart" chosen-class="chosen" animation="1000"
force-fallback="true" group="group" @end="onEnd" class="Li">
<transition-group class="list">
<div class="item" v-for="(item, index) of array1" :key="item.state + '_' + index">{{ item.name }}</div>
</transition-group>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "HomeView",
components: {
draggable
},
data() {
return {
// 是否正在拖拽
drag: false,
array: [
{ group: "list", name: "list1", state: 1 },
{ group: "list", name: "list2", state: 2 },
{ group: "list", name: "list3", state: 3 },
{ group: "list", name: "list4", state: 4 }
],
array1: [
{ group: "list", name: "list5", state: 5 },
{ group: "list", name: "list6", state: 6 },
{ group: "list", name: "list7", state: 7 },
{ group: "list", name: "list8", state: 8 }
]
};
},
methods: {
onStart() {
this.drag = true;
},
onEnd() {
this.drag = false;
}
}
};
</script>
<style lang="scss" scoped>
.home {
width: 55vw;
margin: auto;
.chosen {
background: aquamarine;
color: rgba(0, 0, 0, .3);
}
.drag {
width: 50vw;
text-align: center;
padding-top: 50px;
}
.Li {
display: flex;
.list {
width: 50vw;
display: flex;
.item {
width: 50%;
padding: 30px 0;
border: 1px solid #000;
margin: 15px;
background: blanchedalmond;
}
text-align: center;
}
}
}</style>