拖拽事件

Posted on 2015-08-28 00:10  !sylar  阅读(324)  评论(0)  编辑  收藏  举报

<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>