vue 中基於html5 drag drap的拖放

  事情是這樣的，右邊有各種控件，可以拖動到右邊自由區，在自由區內可以隨意拖動。

案例一：

開始的我，so easy！ 通過綁定元素的mousedown 事件，監聽鼠標的mousemove，和mouseup 事件，於是我輕松實現了同一區域內元素可以拖着跑，上代碼！

move (e) {
      let odiv = e.target // 獲取目標元素
      // 算出鼠標相對元素的位置
      let disX = e.clientX - odiv.offsetLeft
      let disY = e.clientY - odiv.offsetTop
      document.onmousemove = e => {
        // 鼠標按下並移動的事件
        // 用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
        let left = e.clientX - disX
        let top = e.clientY - disY
        // 移動當前元素
        odiv.style.left = left + 'px'
        odiv.style.top = top + 'px'
      }
      document.onmouseup = e => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }

　　注意一點，被拖拽對象區域要設置position:relative, 否則的元素會自己抖動。

以上代碼並不能滿足需要，要左右布局，左邊的拖到右邊，在右邊區域隨便拖動。

案例二：

好吧，首先我來布個局，左右布局，給元素綁定事件，上代碼!

<template>
  <div style='position: relative;'>
    <el-container>
      <el-aside width="300px">
        <ul>
          <li class='liStyle' v-for="item in tags" :key='item.id'><img src="../assets/timg.png" class='msg' alt="" @dragstart="dragstart" draggable="true" @drag='draging' @dragend="dragend"></li>
        </ul>
      </el-aside>
      <!-- 自由移動區域 -->
      <el-main>
        <div @drop="drop" @dragover.prevent style='height:600px;width:800px;'>

        </div>
        <!-- <svg id="svgDrag" width="1200" height="1000"></svg> -->
      </el-main>
    </el-container>
  </div>
</template>

事件綁定方法：

dragstart (ev) {
      console.log('dragstart拖拽開始事件，綁定於被拖拽元素上', event)
      ev.dataTransfer.setData('Text', ev.target.id)
      this.offsetX = ev.offsetX
      this.offsetY = ev.offsetY
      console.log(this.offsetX + '-' + this.offsetY)
    },
    draging (e) {
      // console.log('拖動中')
      var x = e.clientX
      var y = e.clientY
      // console.log('shubiao client')
      if (x > 300) {
        console.log(this.tags)
        // drag事件最后一刻，無法讀取鼠標的坐標，pageX和pageY都變為0
        if (x === 0 && y === 0) {
          return // 不處理拖動最后一刻X和Y都為0的情形
        }
        x -= this.offsetX
        y -= this.offsetY
        // console.log('e left')
        // console.log(x + '-' + y)
        /* 它的父級第一個存在定位的元素，如果有margin減去margin值  */
        e.target.style.left = x - 5 + 'px'
        e.target.style.top = y - 60 + 'px'
      }
    },
    drop (ev) {
      console.log('drop拖放事件,綁定可拖放區域', event)
      this.text = ev.dataTransfer.getData('Text')
      console.log(this.text)
      let target = document.getElementById(this.text)
      ev.target.appendChild(target)
      ev.preventDefault()
    },
    dragend (event) {
      event.dataTransfer.clearData()
    }

　　如果不出意外的話，以上代碼已經成功實現了元素從左邊拖到右邊。但是，右邊元素被拖走了，右邊就沒有了，然后我嘗試了各種，拖動開始時clone 元素，drap時clone元素等等，都不太完美。此時的我，崩潰……

終於，也不知道哪來的靈感，這個困擾我兩秒的難題突然就被我成功攻克了。好了，我要開始吹牛了……

  案例三：

       我的思路是這樣的（不想看？直接看代碼好了，反正是給我自己看的）：左邊列表元素可拖動（draggable='true'）,綁定dragstart(開始事件)，不要給它綁定draging(拖動事件)，這樣左邊列表元素有拖動屬性，但是位置不會改變。當右側拖動區域

第一次觸發了drop 操作后，新生成一個對象，這個對象既有拖動（draggable='true'）屬性,也綁定dragstart(開始事件)，拖動事件（drag）,這樣新元素會在右側隨意拖動。那么怎么新生成一個元素呢？自然不是appendChild 之類的，利用Vue 雙向綁定的特性，

頁面上循環數組元素，生成元素即往數組中push 元素即可。每次拖動元素都會觸發drop 事件，並不是每次都要生成一個新元素，要知道是從左邊列表拖到右側第一次drop 的時候生成新元素。怎么知道呢？這就是兩個dragstart的妙處

<t<template>
  <div style='position: relative;'>
    <el-container>
      <el-aside width="300px">
        <ul>
          <li class='liStyle' v-for="item in tags" :key='item.id'>
            <img src="../assets/timg.png" class='msg' alt="" @dragstart="dragstart" draggable="true" :id='item.id' @dragend="imgEnd">
          </li>
        </ul>
      </el-aside>
      <el-main>
        <div @drop.prevent="drop" @dragover.prevent style='height:1000px;width:1800px;'>
          <img src="../assets/timg.png" class='msg' :style="{left:item.x+'px',top:item.y+'px'}" alt="" v-for="(item, $index) in InfoList" :key='$index' @dragstart="imgStart" draggable="true" @drag='draging($event,item)' @dragend="imgEnd">
        </div>
      </el-main>
    </el-container>
  </div>
</template>

　　

  methods: {
    dragstart (ev) {
      let info = { id: ev.target.id, isDrop: true }
      ev.dataTransfer.setData('Text', JSON.stringify(info))
      this.offsetX = ev.offsetX
      this.offsetY = ev.offsetY
    },
    drop (e) {
      let info = JSON.parse(e.dataTransfer.getData('Text'))
      /* 判斷是否是第一次進入拖拽區域，如果是第一次需要新生成對象，否則不需要 */
      if (info.isDrop) {
        var x = e.clientX
        var y = e.clientY
        x -= this.offsetX
        y -= this.offsetY
        info.x = x - 5
        info.y = y - 60
        info.id = info.id + Date.parse(new Date())
        this.InfoList.push(info)
      }
    },
    imgStart (e) {
      let info = { isDrop: false }
      e.dataTransfer.setData('Text', JSON.stringify(info))
      this.imgOffsetX = e.offsetX
      this.imgOffsetY = e.offsetY
    },
    draging (e, item) {
      item.x = e.clientX - this.imgOffsetX - 5
      item.y = e.clientY - this.imgOffsetY - 60
    },
    imgEnd (event) {
      console.log('done')
      console.log(event)
      event.dataTransfer.clearData()
    }
  }

　　注意：拖動元素設置position:absolute屬性

 最后，希望大家有哪些好的拖放插件，可以分享一下，基於jquery 的拖拽插件，我用過幾個，但是總覺得vue中用jq有點怪。