這篇文章將為大家詳細(xì)講解有關(guān)vue中如何基于html5實(shí)現(xiàn)drag drap的拖放效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在冀州等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),成都營銷網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè)公司,冀州網(wǎng)站建設(shè)費(fèi)用合理。

 事情是這樣的，右邊有各種控件，可以拖動(dòng)到右邊自由區(qū)，在自由區(qū)內(nèi)可以隨意拖動(dòng)。

案例一：

開始的我，so easy！ 通過綁定元素的mousedown 事件，監(jiān)聽鼠標(biāo)的mousemove，和mouseup 事件，于是我輕松實(shí)現(xiàn)了同一區(qū)域內(nèi)元素可以拖著跑，上代碼！

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

注意一點(diǎn)，被拖拽對(duì)象區(qū)域要設(shè)置position:relative, 否則的元素會(huì)自己抖動(dòng)。

以上代碼并不能滿足需要，要左右布局，左邊的拖到右邊，在右邊區(qū)域隨便拖動(dòng)。

案例二：

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

事件綁定方法：

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('拖動(dòng)中')
  var x = e.clientX
  var y = e.clientY
  // console.log('shubiao client')
  if (x > 300) {
  console.log(this.tags)
  // drag事件最后一刻，無法讀取鼠標(biāo)的坐標(biāo)，pageX和pageY都變?yōu)?
  if (x === 0 && y === 0) {
   return // 不處理拖動(dòng)最后一刻X和Y都為0的情形
  }
  x -= this.offsetX
  y -= this.offsetY
  // console.log('e left')
  // console.log(x + '-' + y)
  /* 它的父級(jí)第一個(gè)存在定位的元素，如果有margin減去margin值 */
  e.target.style.left = x - 5 + 'px'
  e.target.style.top = y - 60 + 'px'
  }
 },
 drop (ev) {
  console.log('drop拖放事件,綁定可拖放區(qū)域', 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()
 }

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

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

  案例三：

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

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

頁面上循環(huán)數(shù)組元素，生成元素即往數(shù)組中push 元素即可。每次拖動(dòng)元素都會(huì)觸發(fā)drop 事件，并不是每次都要生成一個(gè)新元素，要知道是從左邊列表拖到右側(cè)第一次drop 的時(shí)候生成新元素。怎么知道呢？這就是兩個(gè)dragstart的妙處