zoukankan html css js c++ java

可拖动的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>

查看全文

相关阅读:
sql语句添加查询字段
 SqlServer Case when then用法总结
 单例与多线程
 HttpSession详解
 范式
 SQL语句中的Having子句与where子句
 HTTP无状态
 字节流与字符流的区别
 选择排序
 ReentrantLock VS synchronized

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