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>