vue 拖拽

<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>