JS高级拖动技术 setCapture，releaseCapture

1. 
   
2. <script type="text/javascript">
   
3. <!--
   
4. window.onload=function(){
   
5. objDiv = document.getElementById('drag');
   
6. drag(objDiv);
   
7. };
   
8. function drag(dv){
   
9. dv.onmousedown=function(e){
   
10. var d=document;
    
11. e = e || window.event;
    
12. var x= e.layerX || e.offsetX;
    
13. var y= e.layerY || e.offsetY;
    
14. //设置捕获范围
    
15. if(dv.setCapture){
    
16. dv.setCapture();
    
17. }else if(window.captureEvents){
    
18. window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    
19. }
    
20. d.onmousemove=function(e){
    
21. e= e || window.event;
    
22. if(!e.pageX)e.pageX=e.clientX;
    
23. if(!e.pageY)e.pageY=e.clientY;
    
24. var tx=e.pageX-x;
    
25. var ty=e.pageY-y;
    
26. dv.style.left=tx;
    
27. dv.style.top=ty;
    
28. };
    
29. d.onmouseup=function(){
    
30. //取消捕获范围
    
31. if(dv.releaseCapture){
    
32. dv.releaseCapture();
    
33. }else if(window.captureEvents){
    
34. window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    
35. }
    
36. //清除事件
    
37. d.onmousemove=null;
    
38. d.onmouseup=null;
    
39. };
    
40. };
    
41. }
    
42. //-->
    
43. </script>
    
44. <div id="drag" style="position:absolute;left:12px;top:24px;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">drag me</div>

复制代码

setCapture 的意思就是设置一个对象的方法被触发的范围，或者作用域。
如果不设置，则div只在当前窗口内被触发。如果设置，则在整个浏览器范围内被触发，也就是可以拖到浏览器外面