<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Drag</title>
<script type="text/javascript">
var rePos = function () {
    return document.documentElement.getBoundingClientRect && function (o) {
        var pos = o.getBoundingClientRect(), root = o.ownerDocument || o.document;
        return { x : pos.left + root.documentElement.scrollLeft, y : pos.top + root.documentElement.scrollTop };
    } || function (o) {
        var x = 0, y = 0;
        do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
        return { 'x' : x, 'y' : y };
    };
}();var Drag = {    X : 0, Y : 0, MF : null, EF : null, BF : null,CD:null
    
    , AE : function (element, type, listener) {
    //添加
        var wc = this, listeners = function () { listener.apply(wc, arguments); };
        
        if (element.addEventListener) element.addEventListener(new String(type).substr(2), listeners, false);
        else if (element.attachEvent) element.attachEvent(type, listeners);
        
        return listeners;
    }
    
    , DE : function (element, type, listener) {
    //删除
        if (element.addEventListener) element.removeEventListener(new String(type).substr(2), listener, false);
        else if (element.attachEvent) element.detachEvent(type, listener);
    }
    
    , start : function (moveObj) {
    //开始
        if (this.MO) return;
        this.CD = moveObj.cloneNode(true);
        var pos = rePos(this.MO = moveObj), e = window.event || arguments.callee.caller.arguments[0];
        
        this.X = document.documentElement.scrollLeft + e.clientX - pos.x;
        this.Y = document.documentElement.scrollTop + e.clientY - pos.y;
        
        if (moveObj.setCapture) {
            this.BF = this.AE(moveObj, 'onlosecapture', this.end);
            moveObj.setCapture();
        } else {
            this.BF = this.AE(window, 'onblur', this.end);
        }
        this.MF = this.AE(document, 'onmousemove', this.move);
        this.EF = this.AE(document, 'onmouseup', this.end);
    }
    
    , move : function (e) {
    //移动中
        var e = window.event || e;
        
        window.getSelection && window.getSelection().removeAllRanges();        with (this.MO.style) {
            left = document.documentElement.scrollLeft + e.clientX - this.X + 'px';
            top = document.documentElement.scrollTop + e.clientY - this.Y + 'px';
        }
        //IEscroll问题无视^^
    }
    
    , end : function () {
    //结束
document.body.appendChild(this.CD);
        with(this.CD.style){
left = '0px';
            top = '0px';
}
        if (this.MO.setCapture) {
            this.DE(this.MO, 'onlosecapture', this.BF);
            this.MO.releaseCapture();
        } else {
            this.DE(window, 'onblur', this.BF);
        }
        this.DE(document, 'onmousemove', this.MF);
        this.DE(document, 'onmouseup', this.EF);
        
        this.MO = this.BF = this.MF = this.EF = null;
    }
    
};
</script>
</head>
<body>
<div style="width:100px;height:100px;background-color:#FF0000;position:absolute;" onmousedown="Drag.start(this)">第一个</div><center>字有好多</center></body>
</html>

解决方案 »

  1.   

    6楼的,你比较聪明,就是这种效果.咯咯咯,代码满难的.呵呵
    分全给你了.
    我想问个问题:在.jsp里加了上面的脚本,我在body里也加了代码
    <td width="240"><div style="background-color:#FF0000;position:absolute;" onMouseDown="Drag.start(this)"><img src="C26picture1/1.gif" ></div></td>这些图片都是固定好位置的.我一点图片,会在屏幕最左上角出现这张图片,然后就可以实现那个效果了.
    我不要他在左上角出现,直接点击我所固定好的就出现效果,麻烦告诉我在哪里改,代码看起来比较困难,我还在慢慢的看一会开贴再给你加分
      

  2.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Drag</title>
    <script type="text/javascript">
    var show = function(){
    document.getElementById("odiv").style.display = "block";
    }
    var rePos = function () {
        return document.documentElement.getBoundingClientRect && function (o) {
            var pos = o.getBoundingClientRect(), root = o.ownerDocument || o.document;
            return { x : pos.left + root.documentElement.scrollLeft, y : pos.top + root.documentElement.scrollTop };
        } || function (o) {
            var x = 0, y = 0;
            do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
            return { 'x' : x, 'y' : y };
        };
    }();var Drag = {    X : 0, Y : 0, MF : null, EF : null, BF : null,CD:null
        
        , AE : function (element, type, listener) {
        //添加
            var wc = this, listeners = function () { listener.apply(wc, arguments); };
            
            if (element.addEventListener) element.addEventListener(new String(type).substr(2), listeners, false);
            else if (element.attachEvent) element.attachEvent(type, listeners);
            
            return listeners;
        }
        
        , DE : function (element, type, listener) {
        //删除
            if (element.addEventListener) element.removeEventListener(new String(type).substr(2), listener, false);
            else if (element.attachEvent) element.detachEvent(type, listener);
        }
        
        , start : function (moveObj) {
        //开始
            if (this.MO) return;
            this.CD = moveObj.cloneNode(true);
            var pos = rePos(this.MO = moveObj), e = window.event || arguments.callee.caller.arguments[0];
            
            this.X = document.documentElement.scrollLeft + e.clientX - pos.x;
            this.Y = document.documentElement.scrollTop + e.clientY - pos.y;
            
            if (moveObj.setCapture) {
                this.BF = this.AE(moveObj, 'onlosecapture', this.end);
                moveObj.setCapture();
            } else {
                this.BF = this.AE(window, 'onblur', this.end);
            }
            this.MF = this.AE(document, 'onmousemove', this.move);
            this.EF = this.AE(document, 'onmouseup', this.end);
        }
        
        , move : function (e) {
        //移动中
            var e = window.event || e;
            
            window.getSelection && window.getSelection().removeAllRanges();        with (this.MO.style) {
                left = document.documentElement.scrollLeft + e.clientX - this.X + 'px';
                top = document.documentElement.scrollTop + e.clientY - this.Y + 'px';
            }
            //IEscroll问题无视^^
        }
        
        , end : function () {
        //结束
            document.body.appendChild(this.CD);
            with(this.CD.style){
                left = '0px';
                top = '0px';
            }
            if (this.MO.setCapture) {
                this.DE(this.MO, 'onlosecapture', this.BF);
                this.MO.releaseCapture();
            } else {
                this.DE(window, 'onblur', this.BF);
            }
            this.DE(document, 'onmousemove', this.MF);
            this.DE(document, 'onmouseup', this.EF);
            
            this.MO = this.BF = this.MF = this.EF = null;
        }
        
    };
    </script>
    </head>
    <body>
    <div id="odiv" style="width:100px;height:100px;background-color:#FF0000;position:absolute;display:none" onmousedown="Drag.start(this)">第一个</div>
    <div style="width:100px;height:100px;background-color:#FF0000;position:absolute;top:3px;left:300px" onclick="show()" >第一个</div><center>字有好多</center></body>
    </html>
      

  3.   

    冒昧的问一句?
    this.MO是什么意思呀?
      

  4.   

    MO是moveObject的缩写- -s_liangchao1s 同学那个rePos有点BUG
    向BL大哥讨教后的rePos函数,发上来
    - -,真是麻烦呢都不想用它了。
    var rePos = function () {
        return !window.opera && document.documentElement.getBoundingClientRect && function (o) {
            var pos = o.getBoundingClientRect()
    , root = o.ownerDocument
    , x = pos.left + root.documentElement.scrollLeft - 2
    , y = pos.top + root.documentElement.scrollTop - 2;

    try {
    var f = root.parentWindow || null;
    if (f) {
    var offset = 2 - (f.frameBorder || 1) * 2;
    x += offset, y += offset;
    }
    } catch (exp) {}
    return { x : x, y : y };
        } || function (o) {
            var x = 0, y = 0;
            do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
            return { 'x' : x, 'y' : y };
        };
    }();http://www.cnblogs.com/muxrwc/archive/2008/07/17/1244998.html
    嘿嘿,又了写个公用Drag这个还是蛮好偶感觉
      

  5.   


     <td width="240"><div id="odiv" style="background-color:#FF0000;position:absolute;display:none" onMouseDown="Drag.start(this)"><img src="C26picture1/1.gif" ></div></td>
    <td><div style="background-color:#FF0000;position:absolute;top:475px;left:240px" onclick="show()" ><img src="C26picture1/1.gif" ></div></td>我象这样加了,一点确实不在左上角出现了,但是拖动效果也没了,点击拖动没法拖动了....
      

  6.   

    mu是不是就是BL说的差2px?等我晚上回去再请教你下。
      

  7.   

    ASP.NET交流群[ 64989019 ],欢迎各位加入,让我们共同学习,一同进步.
      

  8.   

    就是一个典型的proxy的拖动。看看这个你也许会有点收获。http://www.never-online.net/blog/?id=220