Vue怎么利用自定義指令實現(xiàn)鼠標(biāo)拖動元素效果

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

核心屬性

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

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

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

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

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

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

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

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

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

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

實現(xiàn)思路

待滑動元素必須設(shè)置 position: fixed or absolute

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

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

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

鼠標(biāo)相對元素位置是指相對于元素左上頂點的位置。

e 指鼠標(biāo)事件，el 指滑動的元素。

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

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

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

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

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

代碼

<template>
	<div class="ball-wrap" v-drag @touchmove.prevent>
	  <!-- 省略... -->
	</div>
</template>

<script>
export default {
  data() {
    return {
      isDrag: false
  },
  methods: {
    click() {
      if (this.isDrag) {
        return
      }

      // 省略...
    }
  },
  directives: {
    drag(el, binding, vnode) {
      /**
       * 獲取客戶端可見內(nèi)容的高度
       *
       * @returns {number}
       */
      const getClientHeight = () => {
        return window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight)
      }

      /**
       * 獲取客戶端可見內(nèi)容的寬度
       *
       * @returns {number}
       */
      const getClientWidth = () => {
        return window.innerWidth || Math.min(document.documentElement.clientWidth, document.body.clientWidth)
      }

      /**
       * startX = null:獲取鼠標(biāo)相對于元素（左上頂點）的x軸坐標(biāo)（移動前坐標(biāo)）
       * startX != null:獲取移動后的左上頂點x軸坐標(biāo)
       *
       * e.clientX:鼠標(biāo)相對客戶端（客戶端左上頂點）的x軸坐標(biāo)
       * el.offsetLeft:元素頂點（左上頂點）相對客戶端（客戶端左上頂點）的x軸坐標(biāo)（元素必須脫離文檔流，position: fixed or absolute）
       * el.clientWidth:元素寬度
       *
       * @param el
       * @param e
       * @param startX
       * @returns {number}
       */
      const getX = (el, e, startX) => {
        if (startX === null) {
          // 返回鼠標(biāo)相對于元素（左上頂點）的x軸坐標(biāo)
          return e.clientX - el.offsetLeft
        }

        // 客戶端可視寬度
        const clientWidth = getClientWidth()
        // 元素自身寬度
        const elWidth = el.clientWidth

        // 移動到x軸位置
        let x = e.clientX - startX
        // 水平方向邊界處理
        if (x <= 0) {
          // x軸最小為0
          x = 0
        } else if (x + elWidth > clientWidth) {
          // x是左上頂點的坐標(biāo)，是否觸碰到右邊邊界（超出可視寬度）要通過右頂點判斷，所以需要加上元素自身寬度
          x = clientWidth - elWidth
        }

        return x
      }

      /**
       * startY = null:獲取鼠標(biāo)相對于元素（左上頂點）的y軸坐標(biāo)（移動前坐標(biāo)）
       * startY != null:獲取移動后的左上頂點y軸坐標(biāo)
       *
       * e.clientY:鼠標(biāo)相對客戶端（客戶端左上頂點）的y軸坐標(biāo)
       * el.offsetTop:元素頂點（左上頂點）相對客戶端（客戶端左上頂點）的y軸坐標(biāo)（元素必須脫離文檔流，position: fixed or absolute）
       * el.clientHeight:元素高度
       *
       * @param el
       * @param e
       * @param startY
       * @returns {number}
       */
      const getY = (el, e, startY) => {
        if (startY === null) {
          // 返回鼠標(biāo)相對于元素（左上頂點）的y軸坐標(biāo)
          return e.clientY - el.offsetTop
        }

        // 客戶端可視高度
        const clientHeight = getClientHeight()
        // 元素自身高度
        const elHeight = el.clientHeight

        // 移動到y(tǒng)軸位置
        let y = e.clientY - startY
        // 垂直方向邊界處理
        if (y <= 0) {
          // y軸最小為0
          y = 0
        } else if (y + elHeight > clientHeight) {
          // 同理，判斷是否超出可視高度要加上自身高度
          y = clientHeight - elHeight
        }

        return y
      }

      /**
       * 監(jiān)聽鼠標(biāo)按下事件（PC端拖動）
       *
       * @param e
       */
      el.onmousedown = (e) => {
        vnode.context.isDrag = false

        // 獲取當(dāng)前位置信息 (startX,startY)
        const startX = getX(el, e, null)
        const startY = getY(el, e, null)

        /**
         * 監(jiān)聽鼠標(biāo)移動事件
         *
         * @param e
         */
        document.onmousemove = (e) => {
          // 標(biāo)記正在移動，解決元素移動后點擊事件被觸發(fā)的問題
          vnode.context.isDrag = true

          // 更新元素位置（移動元素）
          el.style.left = getX(el, e, startX) + 'px'
          el.style.top = getY(el, e, startY) + 'px'
        }

        /**
         * 監(jiān)聽鼠標(biāo)松開事件
         */
        document.onmouseup = () => {
          // 移除鼠標(biāo)相關(guān)事件，防止元素?zé)o法脫離鼠標(biāo)
          document.onmousemove = document.onmouseup = null
        }
      }

      /**
       * 監(jiān)聽手指按下事件（移動端拖動）
       * @param e
       */
      el.ontouchstart = (e) => {
        // 獲取被觸摸的元素
        const touch = e.targetTouches[0]
        // 獲取當(dāng)前位置信息 (startX,startY)
        const startX = getX(el, touch, null)
        const startY = getY(el, touch, null)

        /**
         * 監(jiān)聽手指移動事件
         * @param e
         */
        document.ontouchmove = (e) => {
          // 獲取被觸摸的元素
          const touch = e.targetTouches[0]
          // 更新元素位置（移動元素）
          el.style.left = getX(el, touch, startX) + 'px'
          el.style.top = getY(el, touch, startY) + 'px'
        }

        /**
         * 監(jiān)聽手指移開事件
         */
        document.ontouchend = () => {
          // 移除touch相關(guān)事件，防止元素?zé)o法脫離手指
          document.ontouchmove = document.ontouchend = null
        }
      }
    }
  }
}
</script>

<style scoped>
    .ball-wrap {
	position: fixed;
    }
</style>

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

注意

自定義指令this指向問題

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

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

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

mouseover - mousedown - mouseup - click - mouseout

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

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

// ...

data() 
  return {
    isDrag: false
  }
}

// ...

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

// ...

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

	  // ...
	}
}

移動端滑動問題

移動端滑動時會觸發(fā)默認(rèn)事件，導(dǎo)致滑動卡頓。

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

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