李炎恢 js教程 拖拽上 思路解析

李炎恢再讲js教程 拖拽上

讲到一个登录框，通过鼠标移动登录框到浏览器各个地方，我们现在对李炎恢的怎么想出进行分析：

问题期望是什么？

1.我们通过鼠标点击登录框，然后登录框被移动，松开鼠标，停止移动。

问题实际是什么？

1.我们拥有这个登录框的id

2.这里涉及到我们学过三个鼠标事件

要实现拖拽的流程：

1 先点下去

2 在点下物体被选中，进行move移动

3.抬起鼠标，停止移动

拖拽思路

第一步 通过dom方法获取登录的节点 var oDiv =document.getElementById('login');

第二步通过鼠标点击事件来进行拖拽流程代码编写

第一步流程  先点下去

1） 谁点下去？oDiv       

2)   点下是什么事件？onmousedown

翻译成 js代码如下      oDiv.οnmοusedοwn=function(){ };

第二步流程  在点下物体被选中，进行move移动

1）点下物体是什么？oDiv

2）被选中? 通过onmousedwon 事件被选中

3)进行move移动?oDIV通过onmousemove事件来进行移动

js代码r如下：

       oDiv.οnmοusedοwn=function(){

          oDiv.οnmοusemοve=function(){

         };

};

3）移动的距离？

我觉得求物体移动的思路如下：

1.我们可以把鼠标移动物体距离的值看做是一个变量 var e=e||window.event;

2.物体的移动是从两个方向移动，所以我们要从经x y方向获取

js代码如下：

oDiv.style.left=e.clientX+'px';

oDiv.style.top=e.clientY+'px';

4）组合我们思路

      oDiv.οnmοusedοwn=function(e){

       oDiv.οnmοusemοve=function(e){

        var e=e||window.event; oDiv.style.left=e.clientX+'px';

        oDiv.style.top=e.clientY+'px'; oDiv.style.left=e.clientX+'px';

      };

 };

3 .抬起鼠标，停止移动

第三步流程 抬起鼠标，停止移动

1）抬起鼠标？onmousemove事件

2）抬起之后，发生什么行为？停止移动。（也就是说oDiv.onmousemove事件没有了，所以为null,抬起鼠标的行为也消失）

用js描述如下

    oDiv.οnmοuseup=function(){

     oDiv.οnmοusemοve=null;

     oDiv.οnmοuseup=null

}

3）组合上面所有思路

   oDiv.οnmοusedοwn=function(e){

       //先点下去

       oDiv.οnmοusemοve=function(e){

     //在点下物体被选中，进行move移动

        var e=e||window.event;

       oDiv.style.left=e.clientX+'px';

        oDiv.style.top=e.clientY+'px';

              

      };

      //抬起鼠标，停止移动

        oDiv.οnmοuseup=function(){

        oDiv.οnmοusemοve=null;

         oDiv.οnmοuseup=null

}

 };

第三步 运行代码，出现一个问题，那就是移动登录框时，只能向下向右移动，如何解决？

        因为鼠标点下来区域应该是在登录框的范围内，而移动和松开鼠标是整个浏览器的页面所以只需要onmousemove和onmouseup。

js代码如下：

     oDiv.οnmοusedοwn=function(e){

       //先点下去

     document.οnmοusemοve=function(e){

     //在点下物体被选中，进行move移动

        var e=e||window.event;

       oDiv.style.left=e.clientX+'px';

        oDiv.style.top=e.clientY+'px';

              

      };

      //抬起鼠标，停止移动

        document.οnmοuseup=function(){

       document.οnmοusemοve=null;

        document.οnmοuseup=null

   }

 };

第四步 运行代码，我们在移动登录框时，鼠标点下去移动十分不灵活，那么如何解决这个问题？

     我觉得思路如下：

     1.  首先求出点击鼠标点击的区域与登录框的距离 

      x轴距离 var diffX=e.clientX-oDiv.offsetLeft;

     y轴距离 var diffY=e.clientY-oDiv.offsetTop;

    2.再求出登录框与body之间的距离（此为物体移动的距离，这就好比小学语文课本刻舟求剑说有个楚国人，坐船渡河时不慎把剑掉入河中，他在船上用刀刻下记号，说：“这是我的剑掉下去的地方，一会儿到岸的时候我就在这跳下去找剑。”当船停下时，他沿着记号跳入河中找剑，遍寻不获。这里他在船里的距离与他在河里移动距离都不是，船移动的距离，而船移动的距离应该是他在船里的距离与他在河边距离之差。如果是用他与河边的距离作为船移动的距离，那这个楚国人就只能在船里呆着，船要是移出去他就掉水里。）

     x轴距离 oDiv.style.left =e.clientX-diffX+"px";

     y轴距离 oDiv.style.top=e.clientY-diffY+'px';

  3.组合思路

   oDiv.οnmοusedοwn=function(e){

       //先点下去

   var e=e||window.event;

  var diffX=e.clientX-oDiv.offsetLeft; // x轴距离

  var diffY=e.clientY-oDiv.offsetTop; //  y轴距离

     document.οnmοusemοve=function(e){

     //在点下物体被选中，进行move移动

        var e=e||window.event;

     oDiv.style.left =e.clientX-diffX+"px";

      oDiv.style.top=e.clientY-diffY+'px';

              

      };

      //抬起鼠标，停止移动

        document.οnmοuseup=function(){

       document.οnmοusemοve=null;

        document.οnmοuseup=null

   }

 };