本篇內(nèi)容主要講解“Vue怎么利用自定義指令實現(xiàn)鼠標拖動元素效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue怎么利用自定義指令實現(xiàn)鼠標拖動元素效果”吧!

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、成都網(wǎng)站建設、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務樂昌,十載網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

核心屬性

• Element.clientWidth：元素可視寬度。

• Element.clientHeight：元素可視高度。

• MouseEvent.clientX：鼠標相對于瀏覽器左上頂點的水平坐標。

• MouseEvent.clientY：鼠標相對于瀏覽器左上頂點的垂直坐標。

• Touch.clientX：觸點相對于瀏覽器左上頂點的水平坐標（移動端屬性）。

• Touch.clientY：觸點相對于瀏覽器左上頂點的垂直坐標（移動端屬性）。

• HTMLElement.offsetLeft：當前元素左上角相對于父節(jié)點（HTMLElement.offsetParent）的左邊偏移的距離。當元素脫離文檔流時（position: fixed）則相對于原點（瀏覽器左上頂點）偏移?！鞠嚓P(guān)推薦：vuejs視頻教程】

• HTMLElement.offsetTop：當前元素左上角相對于父節(jié)點（HTMLElement.offsetParent）的頂部偏移的距離。當元素脫離文檔流時（position: fixed）則相對于原點（瀏覽器左上頂點）偏移。

• Element.style.top：可讀可寫，值為 offsetTop。

• Element.style.left：可讀可寫，值為 offsetLeft。

實現(xiàn)思路

待滑動元素必須設置 position: fixed or absolute

元素滑動需要依賴于鼠標的移動，鼠標的移動位置決定了元素滑動的位置，元素的位置是通過調(diào)整左上頂點坐標來的，所以我們要知道元素滑動后的左上頂點坐標，這樣才能將元素移動到指定位置（鼠標懸停的位置）。

首先要計算出鼠標在移動元素前相對元素的位置 (x, y) ：

// 鼠標當前的位置減去元素當前的位置
(x, y) = (e.clientX - el.offsetLeft, e.clientY - el.offsetTop)

鼠標相對元素位置是指相對于元素左上頂點的位置。

e 指鼠標事件，el 指滑動的元素。

知道了鼠標的相對位置，后續(xù)的鼠標移動，只要知道移動后的鼠標坐標，就能很容易的把元素的左上頂點坐標算出來。

計算元素移動后的左上頂點坐標 (x', y') ：

// 鼠標當前的位置減去滑動前的相對位置
(x‘, y’) = (e.clientX - x, e.clientY - y)

(x', y') 就是要移動的最終坐標，然后調(diào)整元素位置即可

el.style.left = x' + 'px'
el.style.top = y' + 'px'

代碼

    .ball-wrap {
	position: fixed;
    }

drag 是我們自定義的指令，在需要滑動的元素上綁定 v-drag 即可。

注意

自定義指令this指向問題

在自定義指令 directives 內(nèi)不能訪問 this，如果需要修改 data 里的值，需要通過 vnode.context.字段名 = 值 修改。

滑動后點擊事件被觸發(fā)

鼠標事件觸發(fā)順序：

mouseover - mousedown - mouseup - click - mouseout

滑動的前提是鼠標必須按下再滑動，所以在我們滑動完畢松開鼠標時，click 事件會被觸發(fā)。

解決方法：定義一個標志變量，表示是否是滑動，點擊事件執(zhí)行時，將此變量作為前置條件，如果是在滑動則不執(zhí)行。

// ...

data() 
  return {
    isDrag: false
  }
}

// ...

el.onmousedown = (e) => {
	// ...
	vnode.context.isDrag = false
	document.onmousemove = (e) => {
    	// 標記正在移動，解決元素移動后點擊事件被觸發(fā)的問題
       	vnode.context.isDrag = true
       	// ...
    }
}

// ...

methods: {
	click() {
	  if (this.isDrag) {
	    return
	  }

	  // ...
	}
}

移動端滑動問題

移動端滑動時會觸發(fā)默認事件，導致滑動卡頓。

在要觸發(fā)滑動的元素上加上 @touchmove.prevent，以阻止默認事件的發(fā)生。

到此，相信大家對“Vue怎么利用自定義指令實現(xiàn)鼠標拖動元素效果”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！