关于完美拖拽的问题三

简单的修改了一下，让它自动吸附，原理很简单，判断t,l的距离，只要让它在小于一个距离的时候距离变为0 就可以了

带边框的自动吸附的拖拽代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
  <title>带框的吸附拖拽</title>
  <style>
  *{margin:0;padding:0;}
  #div1{width:100px; height:100px; position:absolute; background:red;cursor:move;overflow:hidden;border-radius:8px;}
  .div2{border:1px dotted #333;position:absolute;border-radius:8px;}
  </style>
  <script>
  window.onload=function(){
    var oDiv=document.getElementById("div1");
    var disX=disY=0;
    oDiv.onmousedown=function(event){
        var event=event || window.event;
        disX=event.clientX-oDiv.offsetLeft; //判断鼠标在div的X轴位置
        disY=event.clientY-oDiv.offsetTop; //判断鼠标在div的y轴的位置
        var oBox=document.createElement("div");
        oBox.className="div2";
        oBox.style.width=(oDiv.offsetWidth-2)+"px";//为oBox的宽赋值
        oBox.style.height=(oDiv.offsetHeight-2)+"px"; //为oBox 的高赋值
        oBox.style.left=oDiv.offsetLeft+"px";//oBox的初始位置
        oBox.style.top=oDiv.offsetTop+"px";
        document.body.appendChild(oBox);
        if(oDiv.setCapture){ //兼容ie的事件捕获
            oDiv.onmousemove=move;
            oDiv.onmouseup=up;
            oDiv.setCapture();
        }else{
            document.onmousemove=move; //兼容ff chrome
            document.onmouseup=up;
        }
        function move(event){
            var event=event||window.event;
            var l=event.clientX-disX;
            var t=event.clientY-disY;
            if(l<50){
                l=0;
            }else if(l>(document.documentElement.clientWidth-oBox.offsetWidth-50)){
                l=document.documentElement.clientWidth-oBox.offsetWidth;
            }
            if(t<50){
                t=0;
            }else if(t>(document.documentElement.clientHeight-oBox.offsetHeight-50)){
                t=document.documentElement.clientHeight-oBox.offsetHeight;
            }
            oBox.style.left=l+"px";
            oBox.style.top=t+"px";
        }
        function up(){
            oDiv.style.left=oBox.offsetLeft+'px';
            oDiv.style.top=oBox.offsetTop+'px';
            document.body.removeChild(oBox);
            this.onmousemove=null;
            this.onmouseup=null;
            if(oDiv.releaseCapture){
                oDiv.releaseCapture();
            }
        }
        return false;
    };
  }
  </script>
 </head>
 <body>
    <div id="div1"></div>
 </body>
</html>

 

posted @ 2013-11-05 15:00  @敏敏  阅读(105)  评论(0)  编辑  收藏  举报