悬浮图标拖拽事件

因公司要求，菜鸡后端人员临时变前端搬运工一个，各种搬运，终于找到有用的方法。

在这里mark一下~

CSS:先设置一个div块

<style type="text/css">

    #orange{ 
       width: 100px; height: 100px; 
       background-color: #4D4D4D; 
       position: absolute; cursor: pointer;
       z-index:999; 
       -webkit-box-shadow: 3px 3px 0px 3px #C7C7C7; 
       box-shadow: 3px 3px 3px 0px #C7C7C7; 
       }

   </style>

<div id="orange"></div>

把这个div块放到你需要显示的地方

JS:加载移动逻辑

      /*
       *PC端div拖拽方法
       */

var oDiv=document.getElementById('orange');
        var disX=0;
        var disY=0;
        //封装一个函数用于获取鼠标坐标
        function getPos(ev){
           var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
           var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  
           return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};     
        }
        oDiv.οnmοusedοwn=function(ev){
           var oEvent=ev||window.event;
           var pos=getPos(oEvent);  //这样就可以获取鼠标坐标，比如pos.x表示鼠标横坐标
           disX=pos.x-oDiv.offsetLeft;
           disY=pos.y-oDiv.offsetTop;
           document.οnmοusemοve=function(ev){
                /*由于要防止鼠标滑动太快跑出div，这里应该用document.
                   因为触发onmousemove时要重新获取鼠标的坐标，不能使用父函数上的pos.x和pos.y，所以必须写var oEvent=ev||event;var pos=getPos(oEvent);*/
                var oEvent=ev||window.event;
                var pos=getPos(oEvent);
                //防止div跑出可视框
                var l=pos.x-disX;
                var t=pos.y-disY;
                if(l<0){
                    l=0;
                }
                else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                    l=document.documentElement.clientWidth-oDiv.offsetWidth;
                }
                 if(t<0){
                    t=0;
                }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
                    t=document.documentElement.clientHeight-oDiv.offsetHeight;
                }
                oDiv.style.left=l+'px';
                oDiv.style.top=t+'px';
            }
            document.οnmοuseup=function(ev){
                document.οnmοusemοve=null; //将move清除
                document.οnmοuseup=null;
           };
           return false;  //火狐的bug，要阻止默认事件
        }

       /*
       *移动端div拖拽方法

       *缺点：会拖出可视范围，暂未有空解决。
       */
    var touchStart_x = null,touchStart_y = null,touchMove_x = null,touchMove_y = null,boxStartX=null,boxStartY=null;
    $("#orange").on("touchstart",function(e){
        touchStart_x = e.targetTouches[0].pageX;
        touchStart_y = e.targetTouches[0].pageY;
        boxStartX = $("#orange").position().left;
        boxStartY = $("#orange").position().top;
    })
    $("#orange").on("touchmove",function(e){
        touchMove_x = e.targetTouches[0].pageX-touchStart_x;
        touchMove_y = e.targetTouches[0].pageY-touchStart_y;
        $("#orange").css({
            left:boxStartX + touchMove_x,
            top:boxStartY + touchMove_y
        })
    })