javascript 拖动效果

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var obj = g("divFile1");
            var padx, pady, pad2x, pad2y;
            obj.onmousedown = function () {
                var e = window.event;
                this.style.cursor = "move";
                this.style.zIndex = 10000;
                padx = e.clientX - this.offsetLeft;
                pady = e.clientY - this.offsetTop; 
            }
            obj.onmousemove = function () {
                if (!padx) {
                    return;
                }
                var e = window.event; 
                this.style.left = e.clientX - padx - pad2x - g("divWrap").offsetLeft;
                this.style.top = e.clientY - pady - pad2y - g("divWrap").offsetTop;
            }
            obj.onmouseup = function () {
                this.style.cursor = "normal";
                this.style.zIndex = 0;
                padx = undefined;
            }
        }
        function g(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body  style="margin:0; padding:0">

    <div id="divWrap" style="background-color:#aabbff; height: 299px;  376px; margin:100px;">

        <div id="divFile1" style="background-color:Aqua; position:relative;  54px; line-height: 44px; text-align:center;">文件1</div>
        
        <div id="divCopy" 
            
            style="background-color:Aqua;  54px; line-height: 44px; text-align:center; position:absolute; top: 184px; left: 377px;">复制</div>
        <div id="divDelete" 
            
            style="background-color:Aqua;  54px; line-height: 44px; text-align:center;position:absolute; top: 304px; left: 382px;">删除</div>
    </div>
</body>
</html>

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var obj = g("divFile1");
            var padx, pady, maxx, minx, maxy, miny;
            obj.onmousedown = function () {
                var e = window.event;
                this.style.cursor = "move";
                this.style.zIndex = 10000;
                padx = e.clientX - this.offsetLeft;
                pady = e.clientY - this.offsetTop; 
                //最大和最小的拖动点
                minx = g("divWrap").offsetLeft + padx;
                maxx = g("divWrap").offsetLeft + g("divWrap").offsetWidth - (this.offsetWidth - padx);
                miny = g("divWrap").offsetTop + pady;
                maxy = g("divWrap").offsetTop + g("divWrap").offsetHeight - (this.offsetHeight - pady);
                this.setCapture();

                obj.onmousemove = function () {
                    var e = window.event;
                    var ex = e.clientX;
                    var ey = e.clientY;

                    //不能拖出边界
                    if (ex > maxx) {
                        ex = maxx;
                    } else if (ex < minx) {
                        ex = minx;
                    }
                    if (ey > maxy) {
                        ey = maxy;
                    } else if (ey < miny) {
                        ey = miny;
                    }

                    var x = ex - padx - g("divWrap").offsetLeft;
                    var y = ey - pady - g("divWrap").offsetTop;

                    this.style.left = x;
                    this.style.top = y;
                }
                obj.onmouseup = function () {
                    this.style.cursor = "normal";
                    this.style.zIndex = 0;
                    this.releaseCapture();
                    obj.onmousemove = null;
                }
            } 
        }
        function g(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body  style="margin:0; padding:0">

    <div id="divWrap" style="background-color:#aabbff; height: 299px;  376px; margin:100px;">

        <div id="divFile1" style="background-color:Aqua; position:relative;  54px; line-height: 44px; text-align:center;">文件1</div>
        
        <div id="divCopy" 
            
            style="background-color:Aqua;  54px; line-height: 44px; text-align:center; position:absolute; top: 184px; left: 377px;">复制</div>
        <div id="divDelete" 
            
            style="background-color:Aqua;  54px; line-height: 44px; text-align:center;position:absolute; top: 304px; left: 382px;">删除</div>
    </div>
</body>
</html>