jsDOM编程-拖拽层

页面样式代码：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>dom-浮动的div</title>
<script src="id.js" type="text/javascript"></script>
</head>
<body>
     <div id="fu" style="width:200px;height:200px;position:absolute;left:154px;top:100px;z-index:200">
   <div id="side" onmousedown="startdrag(this,event)" onmousemove="drag(this,event)" onmouseup="stopdrag(this)" style="cursor:pointer;width:195px;height:20px;position:absolue;left:0px;top:0px;font-size:9pt;padding-top:5px;padding-left:5px;color:#ffffff;z-index:200;">
   浮动的窗口</div>
   </div>

var x =0; var y=0;//初始化鼠标的坐标

var x1 = 0; var y1=0;//初始化拖拽层fudiv的坐标

var moveable = false ;//默认拖拽层是不会移动的

//准备移动

function startdrag(currentobj,evt){

var e = evt? evt : window.event; //兼容非IE浏览器

if(!window.captureEvents){ //如果是ie的话
                     　　　　　　 obj.setCapture();
                   　　　　 }else{
                       　　　　　　window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);//兼容火狐
                   　　　　　　 }

/**
                       setCapture 的意思就是设置一个对象的方法被触发的范围，或者作用域。
                       如果不设置，则div只在当前窗口内被触发。如果设置，则在整个浏览器范围内被触发，也就是可以拖到浏览器外面
                      查MSND,对SetCapture()函数的说明为：“该函数在属于当前线程的指定窗口里设置鼠标捕获。
                      一旦窗口捕获了鼠标，所有鼠标输入都针对该窗口，无论光标是否在窗口的边界内。同一时刻只能有一个窗口捕获鼠标。
                      如果鼠标光标在另一个线程创建的窗口上，只有当鼠标键按下时系统才将鼠标输入指向指定的窗口。
                      ”一开始我看这个解释误认为了只要在属于窗口里的一个线程调用了SetCapture(hWnd)把hWnd设为当前的窗口句柄，那么以后的所有窗口消息都会发到我们指定的那个窗口消息队列中。
                      这样的理解是错误的！！！在你调用SetCapture(hWnd)函数后，只是能够捕获onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout鼠标消息，
                      但是一般我们是捕获onmousemove和onmouseup两个消息。需要只注意最后一句“如果鼠标光标在另一个线程创建的窗口上，
                      只有当鼠标键按下时系统才将鼠标输入指向指定的窗口”的解释，就是即使你在一个窗口线程里对了了SetCapture()，
                      但你在别的窗口的上点击了同样会把鼠标消息发个这个窗口而是我们通过调用SetCapture()设定那个窗口。
                      因为当鼠标在窗口外面点击的时候，被点击的窗口获得焦点，原来的SetCapture()也就失效了。
                          当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉，否则别的线程想调用就会失败。记住：SetCapture()和ReleaseCapture()必须成对呈现。

setCapture 使用方法

setCapture 可以捕获到移动到浏览器外的鼠标事件。

例如拖动过程中，即使鼠标移动到了浏览器外，拖动程序依然可以执行！

作用就是把把鼠标事件捕获到当前文档指定的对象！

setCapture捕获以下鼠标事件：onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。

使用方法：
currentObj.setCapture();

在拖放结束后，应当使用releaseCapture() 来释放鼠标，使用方法: currentObj.releaseCapture();

这是ie 的专有方法，如果要兼容ff ，就要使用captureEvents 和 releaseEvents

使用方法
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

一般来说，当拖动过程中，使用事件冒泡，直接为 document.onmouseover 就可以达到ff 下的效果，不必使用captureEvents
releaseEvents 使用方法 window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); 一般来说，当拖动过程中，使用事件冒泡，直接为 document.onmouseover 就可以达到ff 下的效果，不必使用captureEvents
**/

　　　　　　　　var MoveWin = currentobj.parentNode; //获得父节点

x = e.clientX;//获得当前鼠标的x坐标值

y = e.clientY;//获得当前鼠标的y坐标值

x1 = parseInt(MoveWin.style.left); //取得当前的拖拽层的left值

y1 = parseInt(MoveWin.style.top);//取得当前的拖拽层的top值

moveable = true;//准备开始移动的标志

}

//开始移动

function drag(currentobj,evt){

var e = evt?evt:window.event;

　　　　　　　 var MoveWin = currentobj.parentNode; //获得父节点

if(moveable){

　　　　 MoveWin.style.left = ((e.clientX-x)+x1) +'px';

MoveWin.style.top = ((e.clientY-y)+y1)+'px.';

}

//停止拖拽

function stopdrag(currentobj){

if(moveable){

//如果处于移动状态
              if(!window.captureEvents){ //如果是ie的话
               currentObj.releaseCapture();
           }else{
               window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); //兼容火狐
               //window.removeEventLisetener("MOUSEMOVE",drag,false);
           }

moveable = false;

}

或者这样写停止也行

//停止拖拽

function stopdrag(){

document.onmousemove = null;

}

</script>
</body></html>

MouseUp

jsDOM编程-拖拽层