Vue 中添加拖动指令

目录

一、源码

二、引入

三、使用

---

 

一、源码

直接上核心代码， my-drag.js

(重点)注意：

1. 事件 onmousemove 和 onmouseup 使用的是 document，不能使用 el，否则会有拖动卡顿问题。
2. 但事件 onmousedown 使用 el 。

import Vue from 'vue';
   
Vue.directive('myDrag', {
    //1.bind:只调用一次，指令第一次绑定到元素时调用。
    //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
    //3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
    bind: function(el) {},
    //inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    inserted: function(el) {
        // 注意这里是 el.onmousedown
        el.onmousedown = function (e) {
            // 鼠标样式为 move 
            el.style.cursor = 'move';
            let disx = e.clientX - el.offsetLeft;
            let disy = e.clientY - el.offsetTop;
            // 注意这里是 document.onmousemove 
            document.onmousemove = (e) => {
                let left = e.clientX - disx;
                let top = e.clientY - disy;
                if(left <= 0) {
                    left = 0;
                }
                //窗口可见宽度
                if(left > (window.innerWidth - el.offsetWidth)) {
                    left = (window.innerWidth - el.offsetWidth)
                }
                if(top <= 0) {
                    top = 0;
                }
                //窗口可见高度
                if(top > (window.innerHeight - el.offsetHeight)) {
                    top = (window.innerHeight - el.offsetHeight)
                }
                el.style.left = left + 'px'
                el.style.top = top + 'px'
            }
            // 注意这里是 document.onmouseup
            document.onmouseup = (e) => {
                // 鼠标样式为 default
                el.style.cursor = 'default';
                document.onmousemove = document.onmouseup = null;
            }
        }
    },
    //当VNode更新的时候会执行updated，可以触发多次
    updated: function (el) { }
})

二、引入

这里使用全局引入， main.js 中 import 即可。

import './my-drag.js';

三、使用

要拖动的元素上添加以 v- 开头的指令名

<div v-myDrag ></div>