js实现元素的拖拽问题及分类练习汇总

     js高阶之-元素在限制范围内的拖动

一.补充知识

    元素的offsetLeft

              offsetTop

offsetLeft 和 offsetTop 属性返回当前元素的偏移位置。IE 怪异模式以父元素为参照进行偏移位置，DOM 标准模式以最近定位元素为参照进行偏移的位置,offsetLeft是离其最近的已经定位的元素，如果没有就相对于body元素计算

   对应最近父元素情况

   1.body元素

         2.table,th,tr,th元素，但其应具有position:releative\absolute,fixed

   3.除position:static的定位元素

 

二.元素的拖动---任意位置

     拖放的三个事情  

        鼠标落下，锁定了鼠标与元素的相对位置

    

             disX=event.pageX-oDiv.offsetLeft;

            disY=event.pageY-oDiv.offsetTop;

        鼠标移动时，鼠标改变，元素同时改变位置（反推过程）

            

                oDiv.style.left=event.pageX-disX+

                oDiv.style.top=event.pageY-disY+

        鼠标抬起，解除上面的效果

               document.οnmοusemοve=document.οnmοuseup=null;//取消移动效果

实现源码：

  var oDiv=document.querySelector("div");
        oDiv.onmousedown=function(){
            //鼠标距离元素的位置
            var disX=event.pageX-oDiv.offsetLeft;//元素距离页面
            var disY=event.pageY-oDiv.offsetTop;
            document.onmousemove=function(){//换成document---防止位置拖放扔掉现象
                //反推
                oDiv.style.left=ev