标签：
<h1>拖拽事件</h1>
<ul>
<li>onmousedown:鼠标按下</li>
<li>onmousemove：鼠标移动</li>
<li>onmouseup：鼠标放开</li>
</ul>
<p>拖拽的时候如果有文字选中，会出现问题！: 当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器的默认拖拽文字的效果</p>
<p>标准下：阻止默认行为</p>
<p>；非标准下：.setCapture()//全局捕获;设置全局捕获，当我门给一个元素设置全局捕获的以后，那么这个元素会监听后续发生的
所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所截取，以触发这个元素绑定的事件</p>
<p>.setCapture(),在IE下有效果，在FF下有这个方法，但是没效果，在chrome下会报错没有这个方法,所以要判断</p>
<p>.releaseCapture()释放全局捕获</p>
1 <div id="div1" style="width: 100px; height: 100px;background: lightcoral;position:absolute;"> 2 <img src="" alt=‘自己添加图片地址‘/> 3 </div> 4 <script type="text/javascript"> 5 window.onload=function(){ 6 var img=document.getElementsByTagName(‘img‘)[0]; 7 var odiv=document.getElementById(‘div1‘); 8 img.src=‘‘; 9 drag(odiv,100,0); 10 function drag(obj,width,height){ 11 obj.onmousedown=function(ev){ 12 var ev=ev||event; 13 var dix=ev.clientX-this.offsetLeft; 14 var diy=ev.clientY-this.offsetTop; 15 if(obj.setCapture) 16 { 17 obj.setCapture(); 18 } 19 document.onmousemove=function(ev){ 20 var L=ev.clientX-dix; 21 var T=ev.clientY-diy; 22 if(L<width){ 23 L=0; 24 }else if(L>document.documentElement.clientWidth-obj.offsetWidth){ 25 L=document.documentElement.clientWidth-obj.offsetWidth 26 } 27 if(T<height){ 28 T=0; 29 }else if(T>document.documentElement.clientHeight-obj.offsetHeight){ 30 T=document.documentElement.clientHeight-obj.offsetHeight 31 } 32 33 obj.style.left=L+‘px‘; 34 obj.style.top=T+‘px‘; 35 } 36 document.onmouseup=function(){ 37 document.onmousemove=null; 38 if(obj.releaseCapture) 39 { 40 obj.releaseCapture(); 41 } 42 } 43 return false; 44 } 45 } 46 }; 47 48 49 </script>
标签：
原文地址：http://www.cnblogs.com/isylar/p/4765180.html
