vue 中基于html5 drag drap的拖放效果案例分析

move (e) {
  let odiv = e.target // 获取目标元素
  // 算出鼠标相对元素的位置
  let disX = e.clientX - odiv.offsetLeft
  let disY = e.clientY - odiv.offsetTop
  document.  = e => {
  // 鼠标按下并移动的事件
  // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
  let left = e.clientX - disX
  let top = e.clientY - disY
  // 移动当前元素
  odiv.style.left = left + \'px\'
  odiv.style.top = top + \'px\'
  }
  document.  = e => {
  document.  = null
  document.  = null
  }
 } 

<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()
 } 

<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()
 }
}