创建drag.js
放在config路径下
drag.js文件内容为
import Vue from 'vue';
//使用Vue.directive()定义一个全局指令
//1.参数一:指令的名称,定义时指令前面不需要写v-
//2.参数二:是一个对象,该对象中有相关的操作函数
//3.在调用的时候必须写v-
const getAttr = (obj, key) => (
obj.currentStyle
? obj.currentStyle[key]
: window.getComputedStyle(obj, false)[key]
);
const drag = Vue.directive('drag', {
// 加上指令
//1.指令绑定到元素上回立刻执行bind函数,只执行一次
//2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象
//3.通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效
bind: function (el) { },
inserted: function (el) {
const target = el.children[0];
const header = target.children[0];
// 鼠标手型
header.style.cursor = 'move';
header.onmousedown = (e) => {
console.log(e)
// 记录按下时鼠标的坐标和目标元素的 left、top 值
const currentX = e.clientX;
const current