可拖动的div

时间：2018-05-14 11:06:16 阅读：131 评论：0 收藏：0 [点我收藏+]

标签：htm absolute def mouse code var fun nbsp move

<!DOCTYPE html>  
<html>    
<head runat="server">    
    <title></title>    
    <style>  
        #mov{  
            background-color: #00DDCC;  
            width: 200px;  
            height: 200px;    
            top: 100px;  
            left: 100px;    
            position: absolute;  
        }  
    </style>  
    <script>
        var mouseX, mouseY;
        var objX, objY;
        var isDowm = false;
        function mouseDown(obj, e) {
            var div = document.getElementById("mov");
            obj.style.cursor = "move";
            objX = div.offsetLeft;
            objY = div.offsetTop;
            mouseX = e.clientX;
            mouseY = e.clientY;
            isDowm = true;
        }
        function mouseMove(e) {
            var div = document.getElementById("mov");
            var x = e.clientX;
            var y = e.clientY;
            if (isDowm) {
                div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
                div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
            }
        }
        function mouseUp(e) {
            if (isDowm) {
                var x = e.clientX;
                var y = e.clientY;
                var div = document.getElementById("mov");
                div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
                div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
                div.style.cursor = "default";
                isDowm = false;
            }
        }
    </script>  
</head>    
<body>    
    <div id="mov" onmousedown="mouseDown(this,event)" onmousemove="mouseMove(event)" onmouseup="mouseUp(event)"></div>   
</body>    
</html>

可拖动的div

标签：htm absolute def mouse code var fun nbsp move

原文地址：https://www.cnblogs.com/tinaluo/p/9034878.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行