在vue項目中使用H5新屬性draggable，對菜單的拖拽，實現菜單的添加及刪除

vue與H5結合使用，實現菜單的拖拽效果

業務需求，將菜單一下面的子菜單，使用拖拽添加到菜單二的子菜單中

點擊一級菜單，顯示對應一級菜單下的子菜單，拖拽子菜單到其他任意一級菜單下 

HTML

<div id="dragBox">
      <div class="targetBox">
        <div>目標盒子 一級菜單</div>
        <p :id="item.id" class="blue"
          v-for="item in list"
          @drop="dropTarget($event, item.id)"
          @dragover.prevent="dragover($event)"
          @click="childrenlist = item.children;deleteFirstId = item.id"
          :key="item.id">{{item.name}} </p>
      </div>
      <div class="dragBox">
        <div>拖拽的盒子 二級菜單</div>
        <p :id="item.id" class="red"
          draggable="true"
          @dragstart="dragStart($event)"
          v-for="(item, index) in childrenlist"
          :key="index">{{item.name}} </p>
      </div>
    </div>

數據

 childrenlist: [],
      list: [
        {
          name: '一級菜單A',
          id: 'a',
          children: [
            {name: '一級菜單A子菜單1-1', id: 'a1-1'},
            {name: '一級菜單A子菜單1-2', id: 'a1-2'},
            {name: '一級菜單A子菜單1-3', id: 'a1-3'}
          ]
        },
        {
          name: '一級菜單B',
          id: 'b',
          children: [
            {name: '一級菜單B子菜單2-1', id: 'b2-1'},
            {name: '一級菜單B子菜單2-2', id: 'b2-2'},
            {name: '一級菜單B子菜單3-3', id: 'c2-3'}
          ]
        },
        {
          name: '一級菜單C',
          id: 'c',
          children: [
            {name: '一級菜單C子菜單3-1', id: 'c3-1'},
            {name: '一級菜單C子菜單3-2', id: 'c3-2'},
            {name: '一級菜單C子菜單3-3', id: 'c3-3'}
          ]
        }
      ],
      deleteFirstId: ''

JS實現

dragStart (ev) {
      ev.dataTransfer.setData('text', ev.target.id)
    },
    dragover (ev) {
      // console.log(ev)
      // ev.preventDefalut()
    },
    dropTarget (ev, targetId) {
      // 防止火狐瀏覽器打開頁面
      ev.preventDefault()
      ev.stopPropagation()
      // 獲取拖拽的子菜單ID
      let id = ev.dataTransfer.getData('text')
      // 獲取目標一級菜單ID
      let target = targetId
      /*
        1. 刪除拖拽的一級菜單中的子菜單
        2. 添加到目標一級菜單中
      */
      // 刪除項
      let templist = []
      for (let i in this.list) {
        if (this.list[i].id === this.deleteFirstId) {
          // 獲取刪除的子菜單索引
          let index = this.childrenlist.findIndex(item => item.id === id)
          templist = this.childrenlist.splice(index, 1)
          this.$set(this.list, i, Object.assign(this.list[i], {children: this.childrenlist}))
        }
      }
      for (let j in this.list) {
        if (this.list[j].id === target) {
          this.$set(this.list, j, Object.assign(this.list[j], {children: [...templist, ...this.list[j].children]}))
        }
      }
      console.log(id)
      console.log(ev.target.id)
    },

 拖拽到一級菜單B中

 

特別注意兩點

1.  dragover必須加prevent

2. 爲了解決火狐瀏覽器拖拽後打開新頁面的問題，drop方法必須加上下面兩行代碼

ev.preventDefault()

ev.stopPropagation()