VUE3实现拖拽功能自定义指令

1.首先创建一个js文件，命名为drag.js

   注意看注释部分，对操作DOM块进行了不同需求的支持

   可以只在移动头部时操作整个DOM，或者是否允许DOM元素移出屏幕都能实现

1.  
   // 拖拽的指令
2.  
   class Drap {
3.  
   static zIndex = 1;
4.  
   constructor(el, option = {}) {
5.  
   this.el = el;
6.  
   this.x = 0;
7.  
   this.y = 0;
8.  
   this.option = option;
9.  
   this.init();
10.  
    this.timeOutEvent = 0;
11.  
    this.ele = null
12.  
    }
13.  
    init() {
14.  
    this.setEleStyle(this.option || {});
15.  
    //拖拽事件赋值给头部标签，此处代码可实现仅在移动头部时操作整个DOM块
16.  
    // this.ele = this.el.getElementsByClassName('header')[0]
17.  
    // if(this.ele){
18.  
    // this.ele.onmousedown = (e) => {
19.  
    // this.onMouseDown(e)
20.  
    // this.el.setCapture && this.el.setCapture() //全局捕获
21.  
    // }
22.  
    // }else{
23.  
    // this.el.onmousedown = (e) => {
24.  
    // this.onMouseDown(e)
25.  
    // this.el.setCapture && this.el.setCapture() //全局捕获
26.  
    // }
27.  
    // }
28.  
    this.el.onmousedown = (e) => {
29.  
    this.onMouseDown(e)
30.  
    this.el.setCapture && this.el.setCapture() //全局捕获
31.  
    }
32.  
    }
33.  
     
34.  
    //样式设置
35.  
    setEleStyle(option) {
36.  
    for (const key in option) {
37.  
    this.el.style[key] = option[key]
38.  
    }
39.  
    }
40.  
    //按下ele
41.  
    onMouseDown(e) {
42.  
    let zIndex = getComputedStyle(this.el).getPropertyValue('z-index');
43.  
    zIndex = isNaN(zIndex) ? 1 : zIndex
44.  
    Drap.zIndex = Drap.zIndex > zIndex ? Number(Drap.zIndex) 1 : Number(zIndex) 1
45.  
    this.setEleStyle({
46.  
    "zIndex": Drap.zIndex,
47.  
    position: 'fixed',
48.  
    'cursor': 'move'
49.  
    })
50.  
    this.x = e.clientX - this.el.offsetLeft;
51.  
    this.y = e.clientY - this.el.offsetTop;
52.  
    document.onmousemove = (e) => this.onMouseMove(e);
53.  
    document.onmouseup = (e) => this.onMouseUp(e)
54.  
    }
55.  
    //移动move
56.  
    onMouseMove(e) {
57.  
    let X = e.clientX - this.x
58.  
    let Y = e.clientY - this.y;
59.  
    //此处使用注释处的代码，此处代码操作DOM块会移出屏幕
60.  
    // if (X < 10 - this.el.offsetWidth) {
61.  
    // X = 10 - this.el.offsetWidth
62.  
    // } else if (X > document.documentElement.clientWidth - 10) {
63.  
    // X = document.documentElement.clientWidth - 10
64.  
    // }
65.  
    // if (Y < 10 - this.el.clientHeight) {
66.  
    // Y = 10 - this.el.clientHeight
67.  
    // } else if (Y > document.documentElement.clientHeight - 10) {
68.  
    // Y = document.documentElement.clientHeight - 10
69.  
    // }
70.  
    //下面代码操作DOM元素不会移出屏幕，-25应更换为-10，按自己需求设置
71.  
    if (X < 0) {
72.  
    X = 0
73.  
    } else if (X > document.documentElement.clientWidth - this.el.offsetWidth) {
74.  
    X = document.documentElement.clientWidth - this.el.offsetWidth - 25
75.  
    }
76.  
    if (Y < 0) {
77.  
    Y = 0
78.  
    } else if (Y > document.documentElement.clientHeight - this.el.offsetHeight) {
79.  
    Y = document.documentElement.clientHeight - this.el.offsetHeight - 25
80.  
    }
81.  
    this.el.style.left = X 'px'
82.  
    this.el.style.top = Y 'px'
83.  
    }
84.  
    //释放
85.  
    onMouseUp(e) {
86.  
    document.onmousemove = null
87.  
    document.onmouseup = null
88.  
    this.setEleStyle({
89.  
    'cursor': 'pointer'
90.  
    })
91.  
    this.el.setCapture && this.el.setCapture() //释放全局捕获
92.  
    }
93.  
    // gtouchstart() {
94.  
    // this.timeOutEvent = setTimeout(() => {
95.  
    // this.timeOutEvent = 0;
96.  
    // //真正长按后应该执行的内容
97.  
    // console.log("长按事件触发发");
98.  
    // }, 500);
99.  
    // return false;
100.  
     // }
101.  
      
102.  
     // gtouchmove() {
103.  
     // clearTimeout(this.timeOutEvent); //清除定时器
104.  
     // this.timeOutEvent = 0;
105.  
     // console.log("取消了");
106.  
     // }
107.  
      
108.  
     // gtouchend() {
109.  
     // clearTimeout(this.timeOutEvent); //清除定时器
110.  
     // if (this.timeOutEvent !== 0) {
111.  
     // console.log("你这是点击，不是长按");
112.  
     // }
113.  
     // return false;
114.  
     // }
115.  
     }
116.  
     export const drag = {
117.  
     mounted(el, binding) {
118.  
     new Drap(el, binding.value || {})
119.  
     }
120.  
     }

2.在main.js中引入drag.js

1.  
   import {createApp} from 'vue';
2.  
   import App from './App.vue';
3.  
   import {drag} from "../public/js/drag.js"
4.  
    
5.  
   let app = createApp(App);
6.  
   app.directive('drag', drag)

3.在你想使用的标签中添加v-drag即可实现拖动了

这篇好文章是转载于：学新通技术网