js 鼠标拖拽案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style type="text/css">
        #box1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload = function () {// 拖拽的流程
            var box1 = document.getElementById("box1")
            var box2 = document.getElementById("box2")
            drag(box1)
            drag(box2)
        }
        function drag(obj){
            obj.onmousedown = function(event){// 1.当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
                event = event || window.event
                var ol = event.clientX - obj.offsetLeft
                var ot = event.clientY - obj.offsetTop
                document.onmousemove = function(event){// 2.当鼠标移动时被拖拽元素跟随移动onmousemove
                    event = event || window.event
                    var left = event.clientX - ol
                    var top = event.clientY - ot
                    obj.style.left = left + 'px'
                    obj.style.top = top + 'px'
                }
                document.onmouseup = function(){// 3.当鼠标松开时，被拖拽元素固定在当前位置onmouseup
                    // 取消onmousemove和onmouseup事件
                    document.onmousemove = null
                    document.onmouseup = null
                }
                // 当documen中有内容，并且我们按了全选后拖拽时，会出现异常，所以下面这句就是解决这个问题
                return false
            }
        }
    </script>
    <div id="box1"></div>
    <div id="box2"></div>
    </body>
    </html>

效果

posted @ 2021-04-06 11:06  张先生zy  阅读(180)  评论(0)  编辑  收藏  举报