offsetX/Y做拖拽，遇到问题，求助。。

如果用clientX/Y，我会做，
但是，换成offsetX/Y，就出问题了
这里纯属研究，求指点。1.为什么会出现一闪一闪的情况？
2.为什么再点一下那个拖动的DIV，就不见了？
是什么原因造成的？
<!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=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){

var oA=document.getElementById('a');
var oT=document.getElementById('t');

oT.onmousedown=function(e){

var oTleft=oT.offsetLeft;
var oTtop =oT.offsetTop;

var Event=e||event;

var Mx=Event.offsetX;//保存鼠标的横坐标
var My=Event.offsetY;//保存鼠标的纵坐标

var disX=Mx-oTleft;//当鼠标按下时，计算鼠标相对于子模块的横坐标
var disY=My-oTtop;//当鼠标按下时，计算鼠标相对于子模块的纵坐标

oA.onmousemove=function(e){

var Event=e||event;

var tl=Event.offsetX-disX;
var tt=Event.offsetY-disY;

oT.style.left=tl+'px';
oT.style.top=tt+'px';

return false;

}

oA.onmouseup=function(e){

oA.onmousemove=null;
oA.onmouseup=null;

}

return false;

}

};
</script>
</head><body><div id="a" style=" background-color: #bf0000; height: 200px; position:relative;">动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动拖动
<div id="t" style="width:50px; height:50px; background-color:#fff; position:absolute; top:0px; left:0px;">
<span>拖动</span>
</div></div></body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

继续顶啊，国庆节了，都去陪MM/GG了么？
给一个拖拽的例子给你，这个是我做的一个消息框，可以屏蔽页面其他动作，在窗口可见范围内拖拽，随意缩放消息框大小，在IE8上测试通过，其他浏览器可能不兼容。<!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=utf-8" />
<style type="text/css">
* { font-size: 12px;}
</style>
</head>

<body>
<input type="text" value=""/>
<input type="text" value=""/>
<input type="text" value=""/>
<input type=button value="确定" style="width:80px" onclick="Dialog.popupDialog('Come on, the world is his who enjoys it.')"/>
<div style="height:1000px"></div>
<script type="text/javascript">
var Dialog = {
    moveTop : 0, moveLeft : 0, moveEnable : false,
    resizeHeight : 0, resizeWidth : 0, resizeEnable : false,
    startupShield : function() {
        var shield = document.createElement("DIV");
        shield.id = "__shield";
        shield.style.cssText = "position:absolute;left:0;top:0;width:100%;z-index:60";
        shield.style.height = document.documentElement.scrollHeight + "px";
        shield.style.background = "000000";
        shield.style.filter = "alpha(opacity=60)";
        document.body.appendChild(shield);
    },
    removeShield : function() {
        document.body.removeChild(document.getElementById("__shield"));
    },
    popupDialog : function(message) {
        var dialog = document.createElement("TABLE");
        dialog.id = "__dialog";
        dialog.style.cssText = "position:fixed;z-index:100;border:solid 2px #999999;border-collapse:collapse;background-color:#ffffff";
        dialog.onselectstart = function() {return false;};
        var row = dialog.insertRow(dialog.rows.length);
        row.style.cssText = "background-color:#cccccc;cursor:move";
        row.onmousedown = function () {
            Dialog.moveLeft = event.clientX - parseInt(dialog.style.left);
            Dialog.moveTop = event.clientY - parseInt(dialog.style.top);
            dialog.rows[0].setCapture();
            Dialog.moveEnable = true;
        };
        row.onmousemove = function () {
            if (Dialog.moveEnable) {
                dialog.style.left = (event.clientX - Dialog.moveLeft <= 0 ? 0 : event.clientX - Dialog.moveLeft)+ "px";
                dialog.style.top = (event.clientY - Dialog.moveTop <= 0 ? 0 : event.clientY - Dialog.moveTop) + "px";
                if (event.clientX - Dialog.moveLeft + dialog.offsetWidth >= document.documentElement.clientWidth) {
                    dialog.style.left = document.documentElement.clientWidth - dialog.offsetWidth + "px";
                }
                if (event.clientY - Dialog.moveTop + dialog.offsetHeight >= document.documentElement.clientHeight) {
                    dialog.style.top = document.documentElement.clientHeight - dialog.offsetHeight + "px";
                }
            }
        };
        row.onmouseup = function () {dialog.rows[0].releaseCapture();Dialog.moveEnable = false;};
        var cell = row.insertCell(row.cells.length);
        cell.style.cssText = "height:24px;text-align:right";
        var close = document.createElement("DIV");
        close.style.cssText = "float:right;margin:2px;padding:0 5px;font-size:14px;border:solid 1px #999999;background-color:#ffffff;cursor:pointer";
        close.setAttribute("onclick", "Dialog.closeDialog()");
        close.innerText = "×";
        cell.appendChild(close);
        row = dialog.insertRow(dialog.rows.length);
        cell = row.insertCell(row.cells.length);
        cell.style.cssText = "width:300px;height:120px;vertical-align:top;color:#ff0000";
        cell.innerHTML = "<div style='width:100%;overflow-y:auto'>" + message + "</div>";
        var resize = document.createElement("DIV");
        resize.style.cssText = "position:absolute;right:0;bottom:0;width:0;height:0;border-style:solid;border-width:0 5px 5px 0;border-color:#999999;cursor:se-resize";
        resize.onmousedown = function() {
            Dialog.resizeWidth = parseInt(resize.parentNode.style.width) - event.clientX;
         Dialog.resizeHeight = parseInt(resize.parentNode.style.height) - event.clientY;
         resize.setCapture();
         Dialog.resizeEnable = true;
        };
        resize.onmousemove = function() {
         if (Dialog.resizeEnable) {
         resize.parentNode.style.width = (event.clientX + Dialog.resizeWidth <= 10 ? 10 : event.clientX + Dialog.resizeWidth) + "px";
                resize.parentNode.style.height = (event.clientY + Dialog.resizeHeight <= 10 ? 10 : event.clientY + Dialog.resizeHeight) + "px";
                resize.parentNode.childNodes[0].style.width = resize.parentNode.style.width;
                resize.parentNode.childNodes[0].style.height = resize.parentNode.style.height;
         }
        };
        resize.onmouseup = function() {resize.releaseCapture();Dialog.resizeEnable = false;};
        cell.appendChild(resize);
        document.body.appendChild(dialog);

        dialog.style.left = (document.documentElement.clientWidth - dialog.offsetWidth)/2 + "px";
        dialog.style.top = (document.documentElement.clientHeight - dialog.offsetHeight)/2 + "px";
        Dialog.startupShield();
    },
    closeDialog : function() {
        document.body.removeChild(document.getElementById('__dialog'));
        Dialog.removeShield();
    }
};
</script>
</body>
</html>
我做过拖曳，当时也遇到不少问题，不过最后还是出来了说说我的作法吧
首先拖曳的话，被拖动的DIV 和鼠标之间的offsetX/Y值应该是固定的。。
因此可以在mousedown 的时候得到offsetX/Y,然后mousemove的时候
先判断是否mousedown？？是的情况下。再重新设置div的left和top的值
大概就是这样。。另外 div 不拖曳出可视区域，则去判断 left ，top的位置
基本上就是这几个步骤，还要一个比较重要的就是setCapture()[设置捕捉范围]和releaseCapture[释放捕捉范围]。
感谢LS的，几位热心回答，
不过，我最关心的是这两个问题：像下面这样的DOM
<div id="a">
<div id="tuozhuai"> </div>
</div>我拖动tuozhuai这个标签的时候，获取的offsetX/Y
好像有两个值
1个是a的
1个是tuozhuai的最后导致一闪一闪的为什么？
我清除事件冒泡也解决不了这个问题
oA.onmousemove=null;
            oA.onmouseup=null;不能这样删除监听事件
你要用 addEventListen  removeEventListen
ie背不出来了你搜索下另外 ot坐标的计算也不对
ot坐标＝  ot原先坐标＋ (鼠标移动坐标 - 鼠标点下去的坐标)
在onload的函数里加入阻止冒泡的方法：oT.onmousemove = function(){
        if ( e && e.stopPropagation )
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        else
            //否则，我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
        }
    }
必须要使用冒泡事件所相同的事件阻止冒泡。我是这么理解冒泡的：父元素的事件会继承给子元素。