当前位置: 首页 > news >正文

vue3实现拖拽移动位置,拖拽过程中鼠标松开后元素还吸附在鼠标上并随着鼠标移动

发现问题

拖拽元素移动的时候,偶尔会出现拖拽过程中鼠标松开后元素还吸附在鼠标上并随着鼠标移动,要再按一下元素才会被放置下来。但是有时就正常。

问题分析

出现该问题的原因是:这个过程会触发H5原生的拖拽事件,并且不会监听到onmouseup,从而导致鼠标松开也能够拖拽。

应该阻止h5的拖拽事件:

document.ondragstart = function(ev) {ev.preventDefault();
};
document.ondragend = function(ev) {ev.preventDefault();
};

在相应的位置添加这2个函数即可。

let move = false;
function mousedown(event, c, type, cells) {tmp = c;if (type === vqEnums.funcType.Condition) {if ((c.Index === props.conditions.length - 1 &&c.Index - 1 >= 0 &&props.conditions[c.Index - 1].FuncType === vqEnums.funcType.Logic) ||(c.Index - 1 >= 0 &&props.conditions[c.Index - 1].FuncType === vqEnums.funcType.Logic &&c.Index + 1 <= props.conditions.length - 1 &&props.conditions[c.Index + 1].AggregateFunc)) {tmpLogicType = props.conditions[c.Index - 1].LogicType;}}if (event.shiftKey && event.which === 1) {cellClick(event, c, cells);} else if (event.which === 1 && !event.ctrlKey && !event.shiftKey) {if (c.FuncType === vqEnums.funcType.Logic ||c.FuncType === vqEnums.funcType.Bracket)return;let _target = $(event.target).hasClass('c-icon')? $(event.target)[0].parentNode: event.target;let cell = c;let startx = event.x - _target.getBoundingClientRect().x;let starty = event.y - _target.getBoundingClientRect().y;let scrolly = $(_target).parent().scrollTop();let cx = _target.getBoundingClientRect().x;let cy = _target.getBoundingClientRect().y;let ww = document.documentElement.clientWidth;let wh = window.innerHeight;let tWidth = _target.getBoundingClientRect().width;let w = tWidth + 8;if ($(_target).hasClass('cell-margin')) {w += 20;}const length = $(_target).next().length;if (length > 0) {if (_target.getBoundingClientRect().y ==$(_target).next()[0].getBoundingClientRect().y) {$(_target).next().css({ marginLeft: w + 'px' });}$(_target).css({position: 'fixed',top: _target.getBoundingClientRect().y - 2,left: _target.getBoundingClientRect().x,'z-index': 999});} else {$(_target).css({// position: 'fixed',top: _target.getBoundingClientRect().y - 2,left: _target.getBoundingClientRect().x,'z-index': 999});}$(_target).siblings().css({ transition: 'margin 0.3s' });$(_target).removeClass('cell-margin');document.onmousemove = function (ev) {if (ev.clientY < 0 ||ev.clientX < 0 ||ev.clientY > wh ||ev.clientX > ww) {mouseup(event, c, type);return false;}if (Math.abs(ev.screenX - event.screenX) >= 5 ||Math.abs(ev.screenY - event.screenY) >= 5 ||move) {if (Math.abs(event.x - ev.x) < 2 ||(Math.abs(event.y - ev.y) < 2 && !move)) {move = false;return false;}if (length == 0) {$(_target).css({position: 'fixed'});}move = true;let endx = ev.x - cx - startx;let endy = ev.y - cy - starty; // - scrollylet siblings = Array.from($(_target).siblings());let cells =type === vqEnums.funcType.Out? props.outs: type === vqEnums.funcType.Condition? props.conditions: props.sorts;setTransform(ev, _target, siblings, cell, cells, tWidth, scrolly);_target.style.transform = 'translate(' + endx + 'px,' + endy + 'px)';}};document.ondragstart = function (ev) {ev.preventDefault();};document.ondragend = function (ev) {ev.preventDefault();};}
}

相关文章:

vue3实现拖拽移动位置,拖拽过程中鼠标松开后元素还吸附在鼠标上并随着鼠标移动

发现问题 拖拽元素移动的时候&#xff0c;偶尔会出现拖拽过程中鼠标松开后元素还吸附在鼠标上并随着鼠标移动&#xff0c;要再按一下元素才会被放置下来。但是有时就正常。 问题分析 出现该问题的原因是&#xff1a;这个过程会触发H5原生的拖拽事件&#xff0c;并且不会监听…...

没有屋檐的房子-011

棺材 &#xff08;下&#xff09; 时过境迁这个成语描述了前因后果的两种概念的变化&#xff0c;时间推延和环境的变迁。问题是&#xff0c;时间是什么呢&#xff1f;是环境变化表征了时间的推延&#xff0c;还是时间推延导致了环境的变化&#xff1f;人在多数时候&#xff0c;…...

Puppeteer-Cluster:并行处理网页操作的新利器

在现代Web开发和自动化测试领域&#xff0c;高效地处理多个网页操作任务成为了许多开发者和测试工程师的迫切需求。传统的Puppeteer工具虽然功能强大&#xff0c;但在处理大量并发任务时可能会显得力不从心。为此&#xff0c;Puppeteer-Cluster应运而生&#xff0c;作为一个基于…...

使用Protocol Buffers传输数据

使用 Google Protocol Buffers&#xff08;ProtoBuf&#xff09;与 Kafka 结合来定义和传输数据&#xff0c;可以确保传输数据的结构性、可扩展性和高效性。以下是一个简单的步骤指南&#xff0c;帮助你实现生产者和消费者。 1. 定义 ProtoBuf 消息格式 首先&#xff0c;你需…...

chmod修改文件权限

0 Preface/Foreword 1 chmod使用方法 1.1 修改单个文件 命令如下&#xff1a; sudo chmod xyz fileName xyz: x, y, z分别代表一个8进制数字&#xff08;0-7&#xff09; 1.2 修改文件夹 命令如下&#xff1a; sudo chmod -R xyz folderName...

二叉树--python

二叉树 一、概述 1、介绍 是一种非线性数据结构&#xff0c;将数据一分为二&#xff0c;代表根与叶的派生关系&#xff0c;和链表的结构类似&#xff0c;二叉树的基本单元是结点&#xff0c;每个节点包括值和左右子节点引用。 每个节点都有两个引用&#xff08;类似于双向链…...

matlab数据批量保存为excel,文件名,行和列的名称设置

Excel文件内数据保存结果如下&#xff1a; Excel文件保存结果如下&#xff1a; 代码如下&#xff1a; clear;clc; for jjjj1:10 %这个可以改 jname(jjjj-1)*10; %文件名中变数 这是EXCEL文件名字的一部分 根据自己需要改 jkkkk_num2str(jname); for …...

Pygame中Sprite类实现多帧动画3-2

3.2.3 设置帧的宽度、高度、范围及列数 通过如图6所示的代码设置帧的宽度、高度、范围及列数。 图6 设置帧的宽度、高度、范围及列数的代码 其中&#xff0c;frame_width、frame_height、rect和columns都是MySprite类的属性&#xff0c;在其__init__()方法中定义&#xff0c;…...

C#发送正文带图片带附件的邮件

1&#xff0c;开启服务&#xff0c;获取授权码。以QQ邮箱为例&#xff1a; 点击管理服务&#xff0c;进入账号与安全页面 2&#xff0c;相关设置参数&#xff0c;以QQ邮箱为例&#xff1a; 登录时&#xff0c;请在第三方客户端的密码输入框里面填入授权码进行验证。&#xff0…...

【C#跨平台开发详解】C#跨平台开发技术之.NET Core基础学习及快速入门

1. C#与.NET的发展历程 C#是由Microsoft开发的现代编程语言&#xff0c;最初伴随着.NET Framework发布。随着技术的进步&#xff0c;特别是针对跨平台开发的需求&#xff0c;Microsoft推出了.NET Core&#xff0c;这是一个开源且跨平台的框架&#xff0c;支持Windows、macOS和…...

请解释Java中的死锁产生的原因和解决方法。什么是Java中的并发工具类?请列举几个并解释其用途。

请解释Java中的死锁产生的原因和解决方法。 Java中的死锁是指两个或两个以上的线程在执行过程中&#xff0c;因为争夺资源而造成的一种相互等待的现象&#xff0c;若无外力作用&#xff0c;这些线程都将无法向前推进。死锁是并发编程中常见的问题&#xff0c;它会导致程序运行…...

三分钟带你看懂,低代码开发赋能办公方式转变

随着技术的不断进步&#xff0c;企业对办公效率和灵活性的需求日益增长。低代码开发作为一种新兴的开发模式&#xff0c;正在改变传统的办公方式&#xff0c;让非技术背景的业务人员也能参与到应用的创建和维护中来。本文将带你快速了解低代码开发如何赋能办公方式的转变。 什么…...

视频剪辑软件哪个好用?11款软件轻松上手,让创意视频流畅呈现!

视频剪辑已经涉及到很多个领域&#xff0c;视频剪辑软件的需求也是越来越普遍了。很多朋友在日常办公学习中&#xff0c;经常会遇到视频剪辑的问题。借助专业的视频剪辑软件&#xff0c;我们可以快速的对视频进行剪辑&#xff0c;制作出属于自己的作品。 市面上有各种各样的视频…...

pytest二次开发:生成用例参数

pytest.fixture是一个装饰器&#xff0c;用于声明一个fixture。Fixture是pytest中的一个核心概念&#xff0c;它提供了一种将测试前的准备代码&#xff08;如设置测试环境、准备测试数据等&#xff09;和测试后的清理代码&#xff08;如恢复测试环境、删除临时文件等&#xff0…...

想抹黑华为的 请换一种方式

文&#xff5c;琥珀食酒社 作者 | 积溪 咱能不能有点创意&#xff1f; 能不能换个方式&#xff1f; 之前我说预测过 我说华为的三折叠手机 MateXT非凡大师发布 会引来一大波华为黑 还真是被我说中了 华为MateXT刚曝光 就被黄牛炒到10多万 有人说华为要割韭菜 是电子…...

学习学习学习

​ 1. 面试算法 算法题空间限制64MB 2x 10^7 int codetop.cc 数字中文读 &#x1f517; kmp 奶牛生小牛问题 丑数LCR 168. 丑数 - 力扣&#xff08;LeetCode&#xff09; 166. 分数到小数 - 力扣&#xff08;LeetCode&#xff09; 小数循环节 深入解析力扣166题&#xff…...

requestAnimationFrame原理和使用

requestAnimationFrame 是一个用于在浏览器中实现高效动画的方法。它告诉浏览器你希望执行一个动画&#xff0c;并在下一次重绘之前调用指定的回调函数来更新动画。浏览器会自动优化动画的刷新频率&#xff0c;以确保动画的流畅性和性能。 原理 帧刷新&#xff1a;浏览器通常…...

线程的状态(java)

“苦&#xff1f; 何止是苦~~~~~” 本期内容来分享一下线程状态相关的知识哦&#xff01;&#xff01;&#xff01; 对于进程来说&#xff0c;进程是有两种状态的。 一种是就绪状态&#xff1a;正在CPU上执行&#xff0c;或者随时可以去CPU上执行的。 另一种是阻塞状态&…...

Linux IO模型:IO多路复用

● 应用程序中同时处理多路输入输出流&#xff0c;若采用阻塞模式&#xff0c;得不到预期的目的&#xff1b; ● 若采用非阻塞模式&#xff0c;对多个输入进行轮询&#xff0c;但又太浪费CPU时间&#xff1b; ● 若设置多个进程/线程&#xff0c;分别处理一条数据通路&#xff…...

[数据集][目标检测]电梯内广告牌电动车检测数据集VOC+YOLO格式2787张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2787 标注数量(xml文件个数)&#xff1a;2787 标注数量(txt文件个数)&#xff1a;2787 标注…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点(小球运动模拟)6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...