vue 拖拽
作者：互联网
1、左右容器拖拽
2、容器内位置拖拽切换
3、判断性拖拽
<template>
<div>
<div class="left_list">
<div class="_flex">
<transition-group tag="div">
<div
class="item list_wrap"
:class="'item' + index"
v-for="(item, index) in dataList"
:key="index"
v-if="item.key!='box'"
@drop='onDrop($event, item.key)'
@dragover.prevent
@dragenter.prevent
>
<h2>{{ item.title }}</h2>
<p v-if="item.children&&item.children.length>0" v-for="(row,_index) in item.children" :key="_index"
draggable="true"
@dragstart="handleDragStart($event, item,index,_index)"
@dragover.prevent="handleDragOver($event, item,index,_index)"
@dragenter="handleDragEnter($event, item,index,_index)"
@dragend="handleDragEnd($event, item,index,_index)">
{{ row.lable }}</p>
</div>
</transition-group>
</div>
<div class="_flex">
<transition-group tag="div">
<div
class="item list_wrap"
:class="'item' + index"
v-for="(item, index) in dataList"
:key="index"
v-if="item.key=='box'"
@drop='onDrop($event, item.key)'
@dragover.prevent
@dragenter.prevent
>
<h2>{{ item.title }}</h2>
<p v-if="item.children&&item.children.length>0" v-for="(row,_index) in item.children" :key="_index"
draggable="true"
@dragstart="handleDragStart($event, item,index,_index)"
@dragover.prevent="handleDragOver($event, item,index,_index)"
@dragenter="handleDragEnter($event, item,index,_index)"
@dragend="handleDragEnd($event, item,index,_index)">
{{ row.lable }}</p>
</div>
</transition-group>
</div>
</div>
<div class="right_list">
<h1>检测限</h1>
<div class="_list" v-for="(item,index) in rightList" :key="index">
<h2>{{ item.title }}</h2>
<p v-if="item.children&&item.children.length>0" v-for="(row,_index) in item.children" :key="_index"
draggable
@dragstart='startDrag($event, item,index,_index)'
@dragend="dragEnd($event, item,index,_index)">{{ row.lable }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'test2',
data () {
return {
dataList: [
{
title: '电源状态',
key: 'power',
children: [{lable: '电压（V）'}, {lable: '总电量'}, {lable: '电流（A）'}, {lable: '电压故障次数'}, {lable: '漏电流（mA）'}, {lable: '电流故障次数'}]
},
{title: '环境', key: 'surroundings', children: [{lable: '温度1'}, {lable: '温度2'}, {lable: '湿度'}, {lable: '雷击次数'}]},
{
title: 'IO输出',
key: 'IOOutput',
children: [{lable: '主继电器'}, {lable: '报警'}, {lable: 'LED'}, {lable: '风扇'}, {lable: '频闪灯'}]
},
{
title: '箱体布防状态',
key: 'box',
children: [{lable: '空开检测'}, {lable: '压敏监测'}, {lable: '门磁监测'}, {lable: '倾斜监测'}, {lable: '水浸监测'}, {lable: '雷击监测'}]
}
],
rightList: [
{
title: 'IO输入',
key: 'surroundings',
children: [{lable: '电压11111'}, {lable: '总电量1111'}, {lable: '电流111（A）'}, {lable: '电压故障次数1111'}, {lable: '漏电流111（mA）'}, {lable: '电流故障次数111'}]
},
{
title: '模拟量',
key: 'box',
children: [{lable: '温度133333'}, {lable: '温度233333'}, {lable: '湿度33333'}, {lable: '雷击次数33333'}]
},
{
title: '电压值',
key: 'power',
children: [{lable: '主继电器2222'}, {lable: '报警2222'}, {lable: 'LED222'}, {lable: '风扇2222'}, {lable: '频闪灯222'}]
}
],
ending: null,
dragging: null,
newDrag: true
}
},
computed: {
listOne () {
return this.items.filter(item => item.list === 1)
},
listTwo () {
return this.items.filter(item => item.list === 2)
},
listThree () {
return this.items.filter(item => item.list === 3)
}
},
methods: {
// 父拖动
startDrag (event, item, index, _index) {
event.dataTransfer.dropEffect = 'move'
event.dataTransfer.effectAllowed = 'move'
event.dataTransfer.setData('itemKey', item.key)
event.dataTransfer.setData('itemIndex', index)
event.dataTransfer.setData('rowIndex', _index)
this.newDrag = true
},
dragEnd (event, item, index, _index) {
this.newDrag = true
},
onDrop (event, list) {
const itemKey = event.dataTransfer.getData('itemKey')
const itemIndex = event.dataTransfer.getData('itemIndex')
const rowIndex = event.dataTransfer.getData('rowIndex')
if (list == itemKey) {
for (let item of this.dataList) {
if (item.key == itemKey) {
item.children.push(this.rightList[itemIndex].children[rowIndex])
break
}
}
} else {
if (this.newDrag) {
//不是左边拖动
this.$Message.error('当前key不是同一个')
}
}
},
// 子拖动
handleDragStart (e, item, index, _index) {
this.newDrag = false
this.dragging = Object.assign({}, item, {index: index, _index: _index})
},
handleDragEnd (e, item) {
if (this.ending.key != this.dragging.key) {
return
}
let sourceIndex = this.dragging._index
let targetIndex = this.ending._index
let parentInex = this.dragging.index
this.dataList[parentInex].children[sourceIndex] = this.dataList[parentInex].children.splice(targetIndex, 1, this.dataList[parentInex].children[sourceIndex])[0]
},
handleDragOver (e) {
// 首先把div变成可以放置的元素，即重写dragenter/dragover
// 在dragenter中针对放置目标来设置
e.dataTransfer.dropEffect = 'move'
},
handleDragEnter (e, item, index, _index) {
// 为需要移动的元素设置dragstart事件
e.dataTransfer.effectAllowed = 'move'
this.ending = Object.assign({}, item, {index: index, _index: _index})
}
}
}
</script>
<style scoped lang="less">
.right_list, .left_list {
width: 49%;
padding: 10px;
display: inline-block;
vertical-align: top;
h2 {
font-size: 1.5em;
margin: 20px 20px 10px;
}
p {
padding: 10px;
display: inline-block;
width: 48%;
text-align: center;
cursor: pointer;
}
}
.left_list {
background: #bcf5de;
._flex {
margin: 10px;
display: inline-block;
width: 45%;
vertical-align: top;
}
.list_wrap {
margin-bottom: 10px;
border: 1px solid red;
}
}
.right_list {
background: #fdbfab;
}
</style>
View Code
标签：index,vue,lable,children,拖拽,item,key,event 来源： https://www.cnblogs.com/nelsonlei/p/16327043.html