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

案例一：

開始的我，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屬性