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属性

总结

以上所述是小编给大家介绍的vue 中基于html5 drag drap的拖放效果案例分析，希望对大家有所帮助