安装
npm install vuedraggable
<template>
<div class="fluid container">
<div class="form-group form-group-lg panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">拖拽组件</h3>
</div>
<div class="panel-body">
<div class="checkbox">
<label><input type="checkbox" v-model="editable">启用拖拽</label>
</div>
<button type="button" class="btn btn-default" @click="orderList">恢复初始排序</button>
</div>
</div>
<div class="box">
<div class="groupBox">
<div class="col-md-3">
<!-- 拖拽元素盒子 -->
<draggable class="list-group" element="ul" v-model="list" :options="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false">
<transition-group type="transition" :name="'flip-list'">
<li class="list-group-item licommon" v-for="element in list" :key="element.order">
<i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
{{element.name}}
<span class="badge">{{element.order}}</span>
</li>
</transition-group>
</draggable>
</div>
</div>
<div class="groupBox">
<div class="col-md-3">
<!-- 目标元素盒子 -->
<draggable element="span" v-model="list2" :options="dragOptions" :move="onMove">
<transition-group name="no" class="list-group targetUl" tag="ul">
<li class="list-group-item" v-for="element in list2" :key="element.order">
<i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
{{element.name}}
<span class="badge">{{element.order}}</span>
</li>
</transition-group>
</draggable>
</div>
</div>
</div>
<div class="arr">
<!-- 拖拽数组 -->
<div class="list-group col-md-3 arrcommon">
<pre>{{listString}}</pre>
</div>
<!-- 目标数组 -->
<div class="list-group col-md-3 arrcommon">
<pre>{{list2String}}</pre>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
const message = [
"詹姆斯",
"杜兰特",
"科比",
"乔丹"
];
export default {
name: "hello",
components: {
draggable
},
data() {
return {
list: message.map((name, index) => {
return { name, order: index + 1, fixed: false };
}),
list2: [],
editable: true,
isDragging: false,
delayedDragging: false
};
},
methods: {
// 恢复初始排序,已经有拖拽到右边时无法恢复
orderList() {
this.list = this.list.sort((one, two) => {
return one.order - two.order;
});
},
onMove({ relatedContext, draggedContext }) {
// 关联元素
const relatedElement = relatedContext.element;
// 拖拽元素
const draggedElement = draggedContext.element;
console.log('拖拽1', relatedElement)
console.log('拖拽2', draggedElement)
return (
(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
);
}
},
computed: {
// 配置项
dragOptions() {
return {
animation: 0,
group: "description",
disabled: !this.editable,
ghostClass: "ghost"
};
},
listString() {
return JSON.stringify(this.list, null, 2);
},
list2String() {
return JSON.stringify(this.list2, null, 2);
}
},
watch: {
isDragging(newValue) {
if (newValue) {
this.delayedDragging = true;
return;
}
this.$nextTick(() => {
this.delayedDragging = false;
});
}
}
};
</script>
<style>
.box{
display:flex;
}
.arr{
display:flex;
}
.arr .arrcommon{
width:50%;
border:1px solid red;
}
.targetUl{
display:flex;
}
.groupBox{
border:1px solid #00FFFF;
width:50%;
}
.groupBox li{
list-style: none;
height:30px;
border:1px solid #eeeeee;
}
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.list-group {
min-height: 20px;
}
.list-group-item {
cursor: move;
}
.list-group-item i {
cursor: pointer;
}
</style>