移动DIV效果大家看看！

&nbsp;<!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>2009年09月21日</title>
<script>
var moveObject = null;
var relLeft;
var relTop;

function f_mousedown(obj){
moveObject = obj;
moveObject.setCapture();//问题一：这句话怎么理解，是一定要加的吗？
moveObject.style.position = "absolute";
relLeft = event.x - moveObject.style.pixelLeft;//问题二：这句怎么理解？
relTop = event.y - moveObject.style.pixelTop;
}  window.document.attachEvent('onmouseup',function(){//问题三：这个事件注册什么意思？
if(moveObject != null){
moveObject.releaseCapture();
moveObject = null;
}
}); function f_mousemove(){
if(moveObject !== null){
moveObject.style.pixelLeft = event.x - relLeft;
moveObject.style.pixelTop = event.y - relTop;
}
}
</script>
</head>

<body>
<div id="d" onmousedown="f_mousedown(this)" onmousemove="f_mousemove()" onmouseover="d.style.cursor='move'" style="margin-left:200px;height:100px;width:100px;background-color:red">
谢谢了！！！ 
</div>
</body>
</html>

解决方案 »

  1.   

    moveObject.setCapture();//问题一：这句话怎么理解，是一定要加的吗？ 
    这是调用moveObject对象的setCapture方法relLeft = event.x - moveObject.style.pixelLeft;//问题二：这句怎么理解？ 
    得到坐标，event。x好像得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置
    moveObject.style.pixelLeft是相对于浏览器左边的位置window.document.attachEvent('onmouseup',function(){//问题三：这个事件注册什么意思？
    是把方法添加到鼠标的弹起事件
      

  2.   

    setCapture()这是一个好东西
    可惜ie only
    别的浏览器 可以用captureEvents 但是firefox不支持  -_-!!!!!!!!
    可以帮任意地方的鼠标世间都帮定到指定的对象
    说的不标准  看看这里的结实
    顺便写个例子
    <!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>00xx</title>
    </head>
    <body>
    <div id='ss' style="height:100px; width:100px; background-color:#0000FF" onmousedown="alert('a')"></div><br><br>
    <div style="height:100px; width:100px; background-color:#FF0099" onmousedown="alert('b')"></div>
    <br><br>
    <input value="set" type="button" onclick="document.getElementById('ss').setCapture()"/>
    </body>
    </html>
      

  3.   

    moveObject.setCapture();//问题一：这句话怎么理解，是一定要加的吗？ 
    这个是增加监听事件的，但是只兼容IE浏览器，现在一般都用
    addEventListener(type,listener,useCapture)relLeft = event.x - moveObject.style.pixelLeft;//问题二：这句怎么理解？ 
    得到当前鼠标位置，但是pixelLeft属性FF不支持，要获得鼠标位置如下：
    var e=window.event || e;
    e.clientX和e.clientY来获取当前鼠标位置window.document.attachEvent('onmouseup',function(){//问题三：这个事件注册什么意思？ 
    是把方法添加到鼠标的弹起事件
      

  4.   

    都必须加，唯一的遗憾就是IE Only
      

  5.   

    2楼朋友你这代码里的那按钮好像没起到任何作用，加跟没加都以个效果！
    朋友能不能给我举个setCapture()方法看起来比较明显的效果。