js学习笔记29----拖拽

原理：先计算鼠标与拖拽目标的左侧距离 跟 上面距离，再计算拖动后的位置。

示例代码：

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <title>拖拽原理</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <style type="text/css">
             #moveBlock{
                 width:100px;height:100px;background-color:#f00;position:absolute
             }
         </style>
         <script>

             window.onload = function(){
                 var oDiv = document.getElementById("moveBlock");
                 oDiv.onmousedown  = function(ev){
                     var ev = ev || event;
                     var disX = ev.clientX - this.offsetLeft; //计算鼠标与当前div左侧距离
                     var disY = ev.clientY - this.offsetTop; //计算鼠标与当前div顶侧距离

                     document.onmousemove = function(ev){
                         var ev = ev || event;
                         oDiv.style.left = ev.clientX - disX + "px";//计算拖动后与左侧的距离
                         oDiv.style.top = ev.clientY - disY + "px";//计算拖动后与顶部的距离
                     }

                     document.onmouseup = function(){
                          document.onmousemove = document.onmouseup = null;
                     }

                 }
             }

         </script>
     </head>
     <body>
         <div id="moveBlock">

         </div>
     </body>
 </html>

我们运行上面的代码如果只是一个单纯的div没什么问题，但是如果同时有文字选中之后，再拖动div会发现有问题。

那是因为当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。

解决方案：

标准：用return false; 阻止事件默认行为

非标准ie :用setCapture()设置全局捕获,当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事情，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发。

 

setCapture()兼容性：

ie : 有，并且有效果

ff : 有，但是没效果

chorme : 没有

 

具体代码如下：

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <title>拖拽改进版</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <style type="text/css">
             #moveBlock{
                 width:100px;height:100px;background-color:#f00;position:absolute
             }
         </style>
         <script>

             window.onload = function(){
                 var oDiv = document.getElementById("moveBlock");
                 oDiv.onmousedown  = function(ev){
                     var ev = ev || event;
                     var disX = ev.clientX - this.offsetLeft;
                     var disY = ev.clientY - this.offsetTop;
                     //设置全局捕获
                     if(oDiv.setCapture){
                         oDiv.setCapture();
                     }

                     document.onmousemove = function(ev){
                         var ev = ev || event;
                         oDiv.style.left = ev.clientX - disX + "px";
                         oDiv.style.top = ev.clientY - disY + "px";
                     }

                     document.onmouseup = function(){
                          document.onmousemove = document.onmouseup = null;
                          //释放事件捕获 releaseCapture();
                          if(oDiv.releaseCapture){
                             oDiv.releaseCapture();
                         }
                     }

                    return false; //阻止事件默认行为

                 }
             }

         </script>
     </head>
     <body>
         <p>
             原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。<br>
             解决： 用return false; 阻止事件默认行为.
         </p>
         <div id="moveBlock">

         </div>
     </body>
 </html>

封装成一个拖拽函数：

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <title>拖拽封装</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <style type="text/css">
             #moveBlock{
                 width:100px;height:100px;background-color:#f00;position:absolute
             }
         </style>
         <script>

             window.onload = function(){

                 var oDiv = document.getElementById("moveBlock");
                 drag(oDiv);

                 function drag(obj){
                     obj.onmousedown  = function(ev){
                         var ev = ev || event;
                         var disX = ev.clientX - this.offsetLeft;
                         var disY = ev.clientY - this.offsetTop;

                         if(obj.setCapture){
                             obj.setCapture;
                         }

                         document.onmousemove = function(ev){
                             var ev = ev || event;
                             obj.style.left = ev.clientX - disX + "px";
                             obj.style.top = ev.clientY - disY + "px";
                         }

                         document.onmouseup = function(){
                             document.onmousemove = document.onmouseup = null;
                             //释放事件捕获 releaseCapture();
                             if(obj.releaseCapture){
                                 obj.releaseCapture();
                             }
                         }

                     return false; //阻止事件默认行为

                     }
                 }

             }

         </script>
     </head>
     <body>
         <p>
             原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。<br>
             解决： 用return false; 阻止事件默认行为.
         </p>
         <div id="moveBlock">

         </div>
     </body>
 </html>