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

本文链接：https://blog.csdn.net/weixin_46038888/article/details/126478761

需求分析

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

发现问题

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

解决问题

出现该问题的原因是：这个过程会触发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>