本文共 1788 字，大约阅读时间需要 5 分钟。

目录

一、源码

直接上核心代码， 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- 开头的指令名

转载地址：http://oanii.baihongyu.com/