当前位置: 首页 > 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 标注…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...