1. 程式人生 > 其它 >vue自定義指令 v-drag拖拽

vue自定義指令 v-drag拖拽

1. 在drag.js檔案中新增

/*
 * 拖拽指令
 */
export default {
    inserted(el) { // 這裡的el是標籤中的v-drag
        let positionParams = {
            x: 20,
            y: 105,
            startX: 0,
            startY: 0,
            endX: 0,
            endY: 0
        }
        el.addEventListener('touchstart', function (e) {
            positionParams.startX 
= e.touches[0].pageX positionParams.startY = e.touches[0].pageY }) el.addEventListener('touchend', function (e) { positionParams.x = positionParams.endX positionParams.y = positionParams.endY positionParams.startX = 0 positionParams.startY
= 0 }) el.addEventListener('touchmove', function (e) { if (e.touches.length > 0) { let offsetX = e.touches[0].pageX - positionParams.startX let offsetY = e.touches[0].pageY - positionParams.startY let x = positionParams.x - offsetX let y
= positionParams.y - offsetY if (x + el.offsetWidth > document.documentElement.offsetWidth) { x = document.documentElement.offsetWidth - el.offsetWidth } if (y + el.offsetHeight > document.documentElement.offsetHeight) { y = document.documentElement.offsetHeight - el.offsetHeight } if (x < 0) { x = 0 } if (y < 0) { y = 0 } el.style.right = x + 'px' el.style.bottom = y + 'px' positionParams.endX = x positionParams.endY = y e.preventDefault() } }) } }

2. 在元件中引入元件並引用

import vDrag from "@/common/utils/drag.js";
export default {
    directives: {
       'drag': vDrag,
  }
}

//要移動的元素
<div class="" v-drag >
    移動的元素
 </div>