JavaScript中的拖拽事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
        }
        #box1{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 200px;
            background-color:skyblue;
        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 400px;
        }
    </style>
    <script>
        window.onload = function () {
            var box = document.querySelector("#box");
            var box1 = document.querySelector("#box1");
            var img = document.querySelector("#img");
            drag(box);
            drag(box1);
            drag(img);
            // 将拖拽功能封装成了一个函数
            function drag(obj) {
                obj.onmousedown = function (event) {
                    // 兼容IE8 调用IE特有的方法setCapture()
                    obj.setCapture && obj.setCapture();
                    event = event || window.event;
                    // 得到盒子和鼠标之间的相对位移
                    var ol = event.clientX - obj.offsetLeft;
                    var ot = event.clientY - obj.offsetTop;

                    document.onmousemove = function (event) {
                        event = event || window.event;
                        // 更改盒子的偏移量, 并减去盒子和鼠标的相对位移
                        obj.style.left = event.clientX - ol + "px";
                        obj.style.top = event.clientY - ot + "px";
                        // 兼容IE8 调用IE特有的方法releaseCapture()
                        obj.releaseCapture && obj.releaseCapture();
                    };

                    document.onmouseup = function () {

                        // 结束事件onmousemove  onmouseup
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                    return false;
                };
            }
        };

    </script>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
<img src="../../images/headPortrait.jpg" id="img">
</body>
</html>

在这里插入图片描述

posted @ 2020-04-14 09:46  陈太浪  阅读(462)  评论(0)    收藏  举报