限制范围的拖拽的简单实现及封装(含磁性吸附)

拖拽的实现及封装:

<body>
    <div id="div1" style="width: 100px; height: 100px; background: orange; position: absolute;">div>
    <div id="div2" style="width: 100px; height: 100px; background: olivedrab; position: absolute; top: 200px; left: 200px;">div>
    <script type="text/javascript">
        var oDiv1=document.getElementById("div1");
        var oDiv2=document.getElementById("div2");

        drag(oDiv1);
        drag(oDiv2);

        function drag(obj){
            obj.οnmοusedοwn=function(ev){
                var ev= ev || event;
                var disX=ev.clientX-this.offsetLeft;  //鼠标距离div上、左边缘的距离
                var disY=ev.clientY-this.offsetTop;

                //设置全局捕获,兼容ie8及以下
                if (obj.setCapture) {
                    obj.setCapture();
                }

                document.οnmοusemοve=function(ev){
                    var ev= ev || event;
                    obj.style.left=ev.clientX-disX+'px';
                    obj.style.top=ev.clientY-disY+'px';
                }
                document.οnmοuseup=function(){
                    document.οnmοusemοve=document.οnmοuseup=null;
                    //释放全局捕获
                    if (obj.releaseCapture) {
                        obj.releaseCapture();
                    }
                }
                return false;  //图片和选中的文字有拖拽默认行为,这里需要阻止
            }
        }

    script>
body>

限制范围:将拖拽限制在可视区域范围之内

<body>
    <div id="div1" style="width: 100px; height: 100px; background: orange; position: absolute;">div>
    <div id="div2" style="width: 100px; height: 100px; background: olivedrab; position: absolute; top: 200px; left: 200px;">div>

    <script type="text/javascript">
        var oDiv1=document.getElementById("div1");
        var oDiv2=document.getElementById("div2");

        drag(oDiv1);
        drag(oDiv2);

        function drag(obj){
            obj.οnmοusedοwn=function(ev){
                var ev= ev || event;
                var disX=ev.clientX-this.offsetLeft;  //鼠标距离div上、左边缘的距离
                var disY=ev.clientY-this.offsetTop;

                //设置全局捕获,兼容ie8及以下
                if (obj.setCapture) {
                    obj.setCapture();
                }

                document.οnmοusemοve=function(ev){
                    var ev= ev || event;
                    var L=ev.clientX-disX;
                    var T=ev.clientY-disY;

                    if (L<0) {
                        L=0
                    }else if(L>document.documentElement.clientWidth-obj.offsetWidth){
                        L=document.documentElement.clientWidth-obj.offsetWidth;
                    }

                    if (T<0) {
                        T=0
                    }else if(T>document.documentElement.clientHeight-obj.offsetHeight){
                        T=document.documentElement.clientHeight-obj.offsetHeight;
                    }

                    obj.style.left= L +'px';
                    obj.style.top= T +'px';
                }
                document.οnmοuseup=function(){
                    document.οnmοusemοve=document.οnmοuseup=null;
                    //释放全局捕获
                    if (obj.releaseCapture) {
                        obj.releaseCapture();
                    }
                }
                return false;  //图片和选中的文字有拖拽默认行为,这里需要阻止
            }
        }

    script>
body>

磁性吸附:如在可视区域20px范围内产生吸附
即将:

if (L<0) {
    L=0
}else if(L>document.documentElement.clientWidth-obj.offsetWidth){
    L=document.documentElement.clientWidth-obj.offsetWidth;
}

if (T<0) {
    T=0
}else if(T>document.documentElement.clientHeight-obj.offsetHeight){
    T=document.documentElement.clientHeight-obj.offsetHeight;
}

改为:

if (L<20) {
    L=0
}else if(L>document.documentElement.clientWidth-obj.offsetWidth-20){
    L=document.documentElement.clientWidth-obj.offsetWidth;
}

if (T<20) {
    T=0
}else if(T>document.documentElement.clientHeight-obj.offsetHeight-20){
    T=document.documentElement.clientHeight-obj.offsetHeight;
}

你可能感兴趣的:(JavaScript)