vuedraggable实现两个盒子之间相互拖拽
- html代码：
//左侧拖拽区域
<div class="box" @drop="onDropToBox1" >
<draggable v-model="myArray1" chosen-class="chosen" force-fallback="true" group="people" animation="500" @start="onStart" @end="onEnd">
<transition-group class="span-wrapper">
<div
class="wrapper-item"
v-for="element in myArray1"
:key="element.id"
@click="spanSizeChoose(element)"
:style="{
width:'calc(100% / '+ element.span +')'
}"
>
<div class="table-lable">{{element.label}}</div>
</div>
</transition-group>
</draggable>
</div>
//中间拖拽区域
<div class="box" @drop="onDropToBox2" >
<draggable v-model="myArray2" chosen-class="chosen" force-fallback="true" group="people" animation="500" @start="onStart" @end="onEnd">
<transition-group class="span-wrapper">
<div
class="wrapper-item"
v-for="element in myArray2"
:key="element.id"
@click="spanSizeChoose(element)"
:style="{
width:'calc(100% / '+ element.span +')'
}"
>
<div class="table-lable">{{element.label}}</div>
</div>
</transition-group>
</draggable>
</div>
//右侧区域 改变拖拽内容的宽度
<div class="right-content">
<p>字段比例</p>
<el-select v-model="valueSpan" @change="changeSpan(valueSpan)" placeholder="请选择">
<el-option
v-for="item in spanOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
- js代码
data() {
return {
spanOptions:[{
value: '50',
label: '50%'
},{
value: '100',
label: '100%'
}],
valueSpan:'100',
drag: false,
spanSize:1,
//拖拽数据
myArray1: [
{ label:'考生姓名',value:'',people: 'cn', id: 1, span:1 },
{ label:'准考证号',value:'',people: 'cn', id: 2, span:1 },
{ label:'科目名称',value:'',people: 'cn', id: 3, span:1 },
{ label:'证件号码',value:'',people: 'us', id: 4, span:1 },
{ label:'性别',value:'',people: 'cn', id: 1, span:1 },
],
myArray2: [
{ label:'报考职位',value:'',people: 'cn', id: 1, span:1 },
{ label:'考点名称',value:'',people: 'cn', id: 2, span:1 },
{ label:'考点地址',value:'',people: 'cn', id: 3, span:1 },
{ label:'考场号',value:'',people: 'us', id: 4, span:1 },
],
dragOptions: {
group: 'boxes',
},
},
methods: {
onDropToBox1(event) {
const draggedItem = event.draggedContext.element;
this.box1Data.splice(event.draggedContext.index, 0, draggedItem);
this.box2Data.splice(event.relatedContext.index, 1);
},
onDropToBox2(event) {
const draggedItem = event.draggedContext.element;
this.box2Data.splice(event.draggedContext.index, 0, draggedItem);
this.box1Data.splice(event.relatedContext.index, 1);
},
onStart() {
this.drag = true;
},
onEnd() {
this.drag = false;
},
changeSpan(value){
console.log(value)
if(value == 50){
this.spanSize = 2
}else {
this.spanSize = 1
}
},
spanSizeChoose(value){
value.span = this.spanSize
console.log(value.span)
},
// 拖拽
drag(ev, id) {
console.log("拖动", id);
this.id = id;
this.dom = ev.currentTarget.cloneNode(true);
console.log(this.dom);
},
// 允许放下拖拽
allowDrop(ev) {
ev.preventDefault();
},
// 放下事件
drop(ev, item) {
console.log("放下", item);
console.log(ev);
ev.preventDefault();
let treeNode = ev.target;
if (treeNode) {
treeNode.appendChild(this.dom);
}
},
}
}
css
.span-wrapper {
display:flex;
flex-wrap:wrap;
.wrapper-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #fdfdfd;
border: solid 1px #eee;
cursor: move;
.table-lable {
flex:0 0 200px;
width: 1px;
font-size: 14px;
color: var(--base-color-text3);
}
.table-value .el-input__inner {
boeder:none
}
}
.wrapper-item:hover {
background-color: #f1f1f1;
cursor: move;
}
}