vue自定义指令实现拖拽

本文介绍如何在Vue.js应用中创建一个自定义指令,用于实现元素的拖拽功能。通过在main.js中全局注册该指令,并在需要的div上应用,可以轻松实现拖放效果。在插入指令时,可以通过获取父节点的事件来处理拖拽过程中的细节,以适应不同的应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创建拖拽的自定义指令,然后在main.js里面注册到全局即可。

import Vue from 'vue';
const drag = Vue.directive('drag', {
    // 指令绑定到元素上回立刻执行bind函数,只执行一次
    bind: function (el) {

    },
    //inserted表示一个元素,插入到DOM中会执行inserted函数,只触发一次
    inserted: function (el) {
        // console.log(e.parentNode)
        // let el = e.parentNode;
        // let el = e;
        let wMax = document.documentElement.clientWidth - el.offsetWidth;
        let hMax = document.documentElement.clientHeight - el.offsetHeight;

        if ("ontouchstart" in window) { // 移动端
            el.ontouchstart = function (e) {
                let time1 = new Date().getTime();
                let x = e.touches[0].pageX - el.offsetLeft;
                let y = e.touches[0].pageY - el.offsetTop;
                // 抑制浏览器端默认拖拽行为,移动端是拖拽屏幕,pc端无
                // e.preventDefault(); 开启后点击 子集点击事件事件会无效
                document.ontouchmove = function (e) {
                    let time2 = new Date().getTime();
                    if (time2 - time1 > 300) {
                        el.classList.remove('v-drag-inactive')
                        el.classList.add('v-drag-active')
                    }
                    let left = e.touches[0].pageX - x;
                    let top = e.touches[0].pageY - y;

                    if (left < 0) left = 0;
                    else if (left > wMax) left = wMax;

                    if (top < 0) top = 0;
                    else if (top > hMax) top = hMax;

                    el.style.left = left + 'px';
                    el.style.top = top + 'px';
                }
                document.ontouchend = function () {
                    let time2 = new Date().getTime();
                    if (time2 - time1 > 300) {
                        el.classList.remove('v-drag-active')
                        el.classList.add('v-drag-inactive')
                    }

                    document.ontouchmove = document.ontouchend = null;
                }
            }
        } else { // pc端
            el.onmousedown = function (e) {
                
                let time1 = new Date().getTime();
                let x = e.pageX - el.offsetLeft;
                let y = e.pageY - el.offsetTop;
                document.onmousemove = function (e) {
                    e.preventDefault();
                    let time2 = new Date().getTime();
                    if (time2 - time1 > 300) {
                        el.classList.remove('v-drag-inactive')
                        el.classList.add('v-drag-active')
                    }
                    el.style.left = e.pageX - x + 'px';
                    el.style.top = e.pageY - y + 'px';
                }
                document.onmouseup = function () {
                    let time2 = new Date().getTime();
                    if (time2 - time1 > 300) {
                        el.classList.remove('v-drag-active')
                        el.classList.add('v-drag-inactive')
                    }
                    document.onmousemove = document.onmouseup = null;
                }
            }
        }


    },
    updated: function (el) {
    }
})
export default drag;

如果需要拖拽顶部则需要把指令写在需要的div上,然后在inserted里面获取父节点的事件即可(可根据场景来选择)

inserted: function (e) {
        console.log(e.parentNode)
        let el = e.parentNode;
        let wMax = document.documentElement.clientWidth - el.offsetWidth;
        let hMax = document.documentElement.clientHeight - el.offsetHeight;
        .................................此处代码省略,和上面一样
        // 这里的点击事件用拖拽的事件e 而不是父节点的事件el
        e.onmousedown = function (e) {
                
                let time1 = new Date().getTime();
                let x = e.pageX - el.offsetLeft;
                let y = e.pageY - el.offsetTop;
                document.onmousemove = function (e) {
                    e.preventDefault();
                    let time2 = new Date().getTime();
                    if (time2 - time1 > 300) {
                        el.classList.remove('v-drag-inactive')
                        el.classList.add('v-drag-active')
                    }
                    el.style.left = e.pageX - x + 'px';
                    el.style.top = e.pageY - y + 'px';
                }
          }
           ................................此处代码省略 ,和上面一样
    }
### ToDesk 使用教程详尽指南 #### 安装过程概述 为了在 Ubuntu 系统上成功安装 Todesk 远程控制软件,需遵循特定的操作流程。该流程已被细分为三个主要部分,确保用户可以无障碍地完成整个安装过程[^1]。 #### 启动与登录 一旦安装完毕,启动应用程序后会提示创建账户或使用已有账号登录。首次使用者需要注册新账户来获取服务权限。输入有效的电子邮件地址以及设定密码即可完成这一环节。 #### 用户界面导航 主界面上方设有菜单栏,包含了文件传输、聊天等功能选项;左侧边栏则列出了最近连接过的设备列表方便快速访问。中间区域显示当前操作对象的画面预览窗口,在这里能够看到被控端屏幕实时影像。 #### 建立远程连接 要建立新的远程连接,可以通过两种方式实现:一种是在客户端直接输入目标机器上的识别码进行配对;另一种方法是从已保存联系人里挑选想要操控的对象发起请求。当对方接受邀请之后便能开始共享桌面了。 #### 文件交换功能 除了基本的视窗分享外,Todesk 支持双向文件传送能力。只需拖拽所需发送的数据到对应位置就能轻松达成目的。这项特性极大地提高了工作效率,特别是在团队协作场景下显得尤为重要。 ```bash # 打开终端执行命令更新源并下载最新版本的应用程序 sudo apt-get update && sudo apt-get install todesk ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值