可拖动的div

Posted YuRi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了可拖动的div相关的知识，希望对你有一定的参考价值。

##

<!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的主要内容，如果未能解决你的问题，请参考以下文章

如何使 div 可拖动和可放置

在拖动 jquery 可拖动 div 时显示指南并进行捕捉

如果将div的可拖动范围限定在指定元素内

保存可拖动的 div 位置

JQuery 可拖动的 div

stopPropagation 不适用于可拖动的 resizble div