需求分析

实现一个任意元素可以被鼠标任意拖拽：鼠标在这个元素上按下，开始拖拽，元素跟着鼠标一起移动，当鼠标松开时，被拖拽的元素固定在当前位置上。如图所示（底下灰色的轨迹不知道为啥录制动图就出现了，实际效果是不会出现）

发现问题

多次测试发现，在拖拽过程中，鼠标已经松开了，但是元素还跟着鼠标一起移动，需要鼠标点击一下，元素才能被放下。

解决问题

出现该问题的原因是：这个过程会触发H5原生的拖拽事件，并且不会监听到onmouseup，从而导致鼠标松开也能够拖拽。
解决办法就是直接干掉H5的拖拽事件

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

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1 {width: 100px;height: 100px;background-color: pink;position: absolute;}/* #box2 {width: 100px;height: 100px;background-color: skyblue;position: absolute;left: 50px;top: 50px;} */</style><script>window.onload = function(){var box1 = document.getElementById("box1");box1.onmousedown = function(e){if (box1.setCapture) {box1.setCapture();}//设置鼠标不论点哪个位置都不会偏移，点在元素哪个位置就是哪个位置e = e || window.e;ol = e.clientX - box1.offsetLeft;ot = e.clientY - box1.offsetTop;document.onmousemove = function(e){e = e || window.e;var left = e.clientX - ol;var top = e.clientY - ot;//记住要+'px'box1.style.left = left + 'px';box1.style.top = top + 'px';};//设置的是document.onmouseup才不会出现元素重叠时，鼠标抬起失效document.onmouseup = function(){document.onmousemove = null;document.onmousedown = null;document.onmouseup = null;box1.releaseCapture && box1.releaseCapture();};// 解决拖拽过程中鼠标抬起仍旧处于拖拽状态问题document.ondragstart = function(ev) {ev.preventDefault();};document.ondragend = function(ev) {ev.preventDefault();};return false;};};</script>
</head>
<body><!-- wo shi  --><div id="box1"></div><!-- <div id="box2"></div> -->
</body>
</html>

JS实现拖拽并解决拖拽过程中鼠标抬起仍旧处于拖拽状态问题相关推荐

Tensorflow学习笔记6：解决tensorflow训练过程中GPU未调用问题
Tensorflow学习笔记6:解决tensorflow训练过程中GPU未调用问题参考文章: (1)Tensorflow学习笔记6:解决tensorflow训练过程中GPU未调用问题 (2)http ...
解决Linux安装过程中不能安装Grub的问题
参考,部分转载和万分感谢:解决Linux安装过程中不能安装Grub的问题关卡1: 从前段时间折腾了很久,刚开始是因为/boot区已经占满了,那么为什么会占满呢?因为当时尝试初次手动分区,然后参考了网 ...
u盘装linux镜像是dvd吗,使用U盘刻录镜像及解决在安装过程中找不到光盘的问题...
一.使用U盘刻录镜像 1.安装之后我们打开软件,点击文件打开,找到我们刚才进行下载的Ubuntu的ISO文件,然后点击打开,完成ISO文件的加载.接着我们插入U盘,点击UltraISO启动选项,然后找 ...
cad2020安装1603错误_解决CAD安装过程中出现1603致命错误的方法
原标题:解决CAD安装过程中出现1603致命错误的方法安装AutoCAD的时候,出现致命错误,提示1603错误,如下图所示,应该如何解决出现这个问题,可尝试一下方法解决 1.删除安装程序,找到一下 ...
如何解决劳务派遣过程中出现劳动关系争议问题？
劳务派遣业务是近年我国人才市场根据市场需求而开办的新的人才中介服务项目,是一种新的用人方式,可跨地区.跨行业进行.用人单位可以根据自身工作和发展需要,通过正规劳务服务公司,派遣所需要的各类人员.那么, ...
使用python+opencv和pillow以及numpy对图像进行旋转，以及解决图像旋转过程中出现的黑边问题
文章目录: 1 使用pillow对图像进行旋转 1.1 pillow对图像进行旋转 1.2 解决使用pillow旋转过程中出现的黑边问题 2 使用opencv对图像进行旋转 2.1 opencv对图像 ...
求qt如何解决小数计算过程中的精度丢失
问题描述在下面的例子中,变量a减去一个常量,本该值为0.90,但是通过程序得到a的值0.8999999999,例子如下: qreal a = 0.95; a = a - 0.05; 不光是做减法的时 ...
如何解决“自动装包”过程中oppo、vivo等手机需要输入密码的问题
版权声明:允许转载,但转载必须保留原链接:请勿用作商业或者非法用途此文章来源于项目官方公众号:"AirtestProject" 前言前俩天看到Airtest讨论群里面提出了1个 ...
kali安装卡在最后一步_解决kali安装过程中配置网络失败问题
我在安装kali的时候遇到了这个问题,百度上的方法几乎试遍,上面大多都是安装完成后, cd /etc/network/interfaces修改文件.但是我试了好几遍,安装了好几次都没有解决所以写下此文 ...

JS实现拖拽并解决拖拽过程中鼠标抬起仍旧处于拖拽状态问题

需求分析

发现问题

解决问题

代码实现

JS实现拖拽并解决拖拽过程中鼠标抬起仍旧处于拖拽状态问题相关推荐

最新文章

热门文章