实现vue-draggable多列表拖拽
第一步:
npm安装 : npm install vuedraggable --save
第二部:
在页面按需引入:import draggable from ‘vuedraggable’
第三步:
废话少说,上代码,
全部代码 ,可直接复制到页面上,
<template>
<div>
<!--使用draggable组件-->
<div class="itxst">
<div class="col">
<div class="title">国内网站</div>
<draggable v-model="arr1" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass"
chosenClass="chosenClass" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
</div>
<div class="col">
<div class="title">你可以把左边的元素拖到右边</div>
<draggable v-model="arr2" group="site" animation="100" dragClass="dragClass" ghostClass="ghostClass"
chosenClass="chosenClass" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
drag: false,
arr1: [{
id: 1,
name: 'www.itxst.com'
},
{
id: 2,
name: 'www.jd.com'
},
{
id: 3,
name: 'www.baidu.com'
},
{
id: 4,
name: 'www.taobao.com'
}
],
arr2: [{
id: 1,
name: 'www.google.com'
},
{
id: 2,
name: 'www.msn.com'
},
{
id: 3,
name: 'www.ebay.com'
},
{
id: 4,
name: 'www.yahoo.com'
}
]
}
},
mounted() {
},
methods: {
onStart() {
this.drag = true;
},
onEnd() {
this.drag = false;
},
}
}
</script>
<style lang="scss" scoped>
/*定义要拖拽元素的样式*/
.ghostClass {
background-color: blue !important;
}
.chosenClass {
background-color: red !important;
opacity: 1 !important;
}
.dragClass {
background-color: blueviolet !important;
opacity: 1 !important;
box-shadow: none !important;
outline: none !important;
background-image: none !important;
}
.itxst {
margin: 10px;
}
.title {
padding: 6px 12px;
}
.col {
width: 40%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col+.col {
margin-left: 10px;
}
.item {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: #f1f1f1;
}
.item:hover {
background-color: #fdfdfd;
cursor: move;
}
.item+.item {
border-top: none;
margin-top: 6px;
}
</style>