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();};}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/53291.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET 8月份红队武器库和资源集合

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

MacBook真的不能打游戏吗?Mac打游戏会损坏电脑吗?苹果电脑怎么玩游戏

MacBook从来都是高端的代名词&#xff0c;超强的性能搭配顶尖的系统&#xff0c;不光处理大型文件时举重若轻&#xff0c;长期使用也不会有明显卡顿。但很多人在需要MacBook一流的生产力同时&#xff0c;也希望能在空闲时体验游戏的乐趣。在大多人的印象里&#xff0c;Mac电脑对…

【MIT 6.5840/6.824】In Search of an Understandable Consensus Algorithm 学习笔记

In Search of an Understandable Consensus Algorithm 1 Introduction2 Replicated state machines3 What’s wrong with Paxos?4 Designing for understandability5 The Raft consensus algorithm5.1 Raft basics5.2 Leader election5.3 Log replication5.4 Safety5.4.1 Elec…

服务器数据恢复—Raid磁盘阵列故障类型和常见故障原因

出于尽可能避免数据灾难的设计初衷&#xff0c;RAID解决了3个问题&#xff1a;容量问题、IO性能问题、存储安全(冗余)问题。从数据恢复的角度讨论RAID的存储安全问题。 常见的起到存储安全作用的RAID方案有RAID1、RAID5及其变形。基本设计思路是相似的&#xff1a;当部分数据异…

【渗透测试专栏】1.2认证和授权类-越权访问(水平/垂直越权)

该系列专栏旨在让漏洞检测变得更简单&#xff0c;只用于学习用途 靶机环境请看专栏前言专栏前言-WooYun漏洞库环境搭建-CSDN博客 目录 该系列专栏旨在让漏洞检测变得更简单&#xff0c;只用于学习用途 一、漏洞描述 1、水平越权 2、垂直越权 二、漏洞级别 三、漏洞检测…

PyTorch 创建数据集

图片数据和标签数据准备 1.本文所用图片数据在同级文件夹中 ,文件路径为train/’ 2.标签数据在同级文件&#xff0c;文件路径为train.csv 3。将标签数据提取 train_csvpd.read_csv(train.csv)创建继承类 第一步&#xff0c;首先创建数据类对象 此时可以想象为单个数据单元的…

信创实践(3):基于x2openEuler将CentOS升级成openEuler,享受其带来的创新和安全特性

引言&#xff1a; 在当前的 IT 行业中&#xff0c;创新和安全性是两大关键趋势。随着 CentOS 停止维护&#xff0c;许多用户正在寻找替代方案&#xff0c;以保持其系统的更新和安全。openEuler 作为一个强大的开源操作系统&#xff0c;成为了理想的迁移目标。本教程将指导您如…

Java线程池的优化策略与最佳实践

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云/阿里云/华为云/51CTO&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互…

LiveQing视频点播流媒体RTMP推流服务功能-支持大疆等无人机RTMP推流支持OBS推流一步一步搭建RTMP视频流媒体服务示例

LiveQing支持大疆等无人机RTMP推流支持OBS推流一步一步搭建RTMP视频流媒体服务示例 1、流媒体服务搭建2、推流工具准备3、创建鉴权直播间4、获取推流地址5、配置OBS推流6、推流及播放7、获取播放地址7.1 页面查看视频源地址7.2 接口查询 8、相关问题8.1、大疆无人机推流花屏 9、…

感知机模型

一、概述 感知机模型(Perceptron Model)也叫做神经元模型&#xff0c;设计灵感即来自于生物神经元的运行机制&#xff0c;依次完成信息接收、处理、输出的过程。当前大放异彩的各种人工神经网络模型即由一个个人工神经元构成&#xff0c;因此&#xff0c;本文介绍的感知机模型&…

【Python123题库】#2019慈善排行 #酒店评价数据分析

禁止转载&#xff0c;原文&#xff1a;https://blog.csdn.net/qq_45801887/article/details/140087686 参考教程&#xff1a;B站视频讲解——https://space.bilibili.com/3546616042621301 有帮助麻烦点个赞 ~ ~ Python123题库 2019慈善排行酒店评价数据分析 2019慈善排行 描…

Hugging Face Offline Mode 离线模式

Hugging Face Offline Mode 离线模式 1. 缓存管理2. 遥测日志 在使用 Hugging Face 的库时&#xff0c;缓存和遥测日志是两个重要的功能。本文将介绍如何管理缓存、启用离线模式以及如何关闭遥测日志。 1. 缓存管理 在使用 Hugging Face 模型时&#xff0c;权重和文件通常会从…

详解 MQ 消息队列

谈起消息队列&#xff0c;内心还是会有些波澜。 消息队列&#xff0c;缓存&#xff0c;分库分表是高并发解决方案三剑客&#xff0c;而消息队列是我最喜欢&#xff0c;也是思考最多的技术。 我想按照下面的四个阶段分享我与消息队列的故事&#xff0c;同时也是对我技术成长经…

使用Fign进行客户端远程调用和SpringFormEncoder的使用

1、引入依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId> </dependency> 2、启动类加上注解 EnableFeignClients SpringBootApplication public class FeignTe…

0成本实现.NET Web API 8.0项目内网映射

1.背景 最近在学习CICD&#xff0c;里面会有用到内网映射的使用场景。为了加深对内网映射实操的记忆。我实操了下基于.Net 8.0的内网映射&#xff0c;并支持互联网访问。本文主要介绍了在win11下安装路由侠&#xff0c;并将.net 8.0发布到win11&#xff0c;项目运行、路由侠配…

vue基于sockjs-client+stompjs实现websocket客户端

在之前的一欸文章中&#xff0c;介绍了好几种前端实现websocket客户端与服务端通信的方式。本章主要采用的是socketjs的方式。 SockJS 是一个浏览器 JavaScript 库&#xff0c;提供类似 WebSocket 的对象。它为浏览器提供了紧密遵循 HTML5 WebSockets API 的 JavaScript API&am…

【学习笔记】5G-A时代物联网应用及策略研究

摘要 海量物联网通信是5G典型应用场景之一&#xff0c;为了实现蜂窝网的全场景物联能力&#xff0c;需要更多的场景化技术&#xff0c;5G-A引入了RedCap&#xff08;5G Reduced Capability&#xff09;和Passive IoT。其中&#xff0c;RedCap降低了设备复杂性及成本&#xff0…

mybatis @Param 注解

在 MyBatis 中&#xff0c;Param 注解用于将方法参数绑定到 SQL 查询语句中的参数上。具体来说&#xff0c;当你在 Mapper 接口中定义方法时&#xff0c;Param 注解可以帮助你指定参数的名称&#xff0c;以便在 SQL 映射文件中使用这些名称。 使用 Param 注解的原因 当你在 M…

weblogic漏洞——CVE-2020-14882

一、基本信息 靶机&#xff1a;IP&#xff1a;192.168.100.40 二、攻击过程 进入 vulhub 靶场相关目录&#xff0c;并启动环境 cd master/weblogic/CVE-2020-14882 docker-compose up -d 绕过登录验证 http://192.168.100.40:7001/console/css/%252e%252e%252fconsole.por…

自己设计的QT系统,留个档

注册登录 主界面展示 天气预报 音乐播放