vue 拖拽

1、左右容器拖拽

2、容器內位置拖拽切換

3、判斷性拖拽（若不適配，滑鼠顯示禁止拖拽圖標）

4、點擊大標題，變輸入框修改，最後提交表單

<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="dragOver($event, item,index)"
            @dragenter.prevent
          >
            <h2 v-on:dblclick="editTitle(index,true)" v-show="!item.showTitleEdit">{{ item.title }}</h2>
            <Input v-model="item.title" :autofocus="true" :ref="'editInput'+index" v-show="item.showTitleEdit"
                   @on-blur="editTitle(index,false)"/>
            <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 }}
              <Icon @click="deleteItem(index,_index)" type="md-close-circle"/>
            </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="dragOver($event, item,index)"
            @dragenter.prevent
          >
            <h2 v-on:dblclick="editTitle(index,true)" v-show="!item.showTitleEdit">{{ item.title }}</h2>
            <Input v-model="item.title" :autofocus="true" :ref="'editInput'+index" v-show="item.showTitleEdit"
                   @on-blur="editTitle(index,false)"/>
            <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)"
               @dragenter="handleDragEnter($event, item,index,_index)"
               @dragend="handleDragEnd($event, item,index,_index)">
              {{ row.lable }}
              <Icon @click="deleteItem(index,_index)" type="md-close-circle"/>
            </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>
    <Button @click="getD">按鈕</Button>
  </div>
</template>

<script>
export default {
  name: 'test2',
  data () {
    return {
      dataList: [
        {
          title: '電源狀態',
          key: 'power',
          showTitleEdit: false,
          children: [{lable: '電壓（V）'}, {lable: '總電量'}, {lable: '電流（A）'}, {lable: '電壓故障次數'}, {lable: '漏電流（mA）'}, {lable: '電流故障次數'}]
        },
        {
          title: '環境',
          key: 'surroundings',
          showTitleEdit: false,
          children: [{lable: '溫度1'}, {lable: '溫度2'}, {lable: '濕度'}, {lable: '雷擊次數'}]
        },
        {
          title: 'IO輸出',
          key: 'IOOutput',
          showTitleEdit: false,
          children: [{lable: '主繼電器'}, {lable: '報警'}, {lable: 'LED'}, {lable: '風扇'}, {lable: '頻閃燈'}]
        },
        {
          title: '箱體佈防狀態',
          key: 'box',
          showTitleEdit: false,
          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,
      parentDragging: null
    }
  },
  methods: {
    // 父拖動
    startDrag (event, item, index, _index) {
      event.dataTransfer.dropEffect = 'move'
      event.dataTransfer.effectAllowed = 'move'
      this.newDrag = true
      this.parentDragging = Object.assign({}, item, {itemIndex: index, rowIndex: _index})
      this.dragging = null
      this.ending = null
    },
    dragOver(event, item, index) {
      // event.dataTransfer.dropEffect = 'move'
      if (this.newDrag) {
        //判斷父類移入
        event.dataTransfer.dropEffect = this.parentDragging.key == item.key ? 'move' : 'none'
      }
    },
    dragEnd (event, item, index, _index) {
      this.newDrag = true
    },
    onDrop (event, list) {
      if (list == this.parentDragging.key) {
        for (let item of this.dataList) {
          if (item.key == this.parentDragging.key) {
            item.children.push(this.rightList[this.parentDragging.itemIndex].children[this.parentDragging.itemIndex])
            break
          }
        }
      } else {
        if (this.newDrag) {
          // 不是左邊拖動
          this.$Message.error('當前key不是同一個')
        }
      }
    },

    // 子拖動
    handleDragStart (e, item, index, _index) {
      this.newDrag = false
      this.parentDragging = null
      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, item, index, _index) {
      // e.dataTransfer.dropEffect = 'move'
      //判斷子類移入
      if (this.dragging) {
        if (this.ending.key != this.dragging.key) {
          e.dataTransfer.dropEffect = 'none'
        } else {
          e.dataTransfer.dropEffect = 'move'
        }
      }
    },
    handleDragEnter (e, item, index, _index) {
      // 為需要移動的元素設置dragstart事件
      e.dataTransfer.effectAllowed = 'move'
      this.ending = Object.assign({}, item, {index: index, _index: _index})
    },

    editTitle (index, bool) {
      this.dataList[index].showTitleEdit = bool
      this.$nextTick(() => {
        this.$refs['editInput' + index][0].focus()
      })
    },
    deleteItem (index, rowIndex) {
      this.dataList[index].children.splice(rowIndex, 1)
    },
    getD () {
      console.log(this.dataList)
    }
  }
}
</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>