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

本文通過三個案例給大家介紹了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的拖放效果案例分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持！