js拖拽效果

onmousedowm:选择元素

onmousemove:移动元素

onmouseup:释放元素

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: #37b9ff;
            position: absolute;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: #ff6471;
            position: absolute;
            left: 400px;
            top:200px;
        }
    </style>
</head>
<body>
    <script>
        window.onload=function () {
            var oDiv=document.getElementById('div1');
            oDiv.onmousedown=function (ev) {
                var ev=ev||event;
                var disX=ev.clientX-this.offsetLeft;
                var disY=ev.clientY-this.offsetTop;
               document.onmousemove=function (ev) {   //用document是因为如果是oDiv.onmousemove，鼠标移动太快，会移出方块，
                                                        // 方块就不会跟着鼠标一起移动
                    var ev=ev||event;
                    oDiv.style.left=ev.clientX-disX+'px';
                    oDiv.style.top=ev.clientY-disY+'px';
                }
                document.onmouseup=function () {      //用document是因为如果是oDiv.onmouseup,当再有一个绝对定位的方块，
                                                        // 则在两个方块重叠部分放开鼠标，方块还是会跟着鼠标一起动。现象原因是
                                                        //当重叠时，鼠标点的对象会是另一个则oDiv就不起作用，所以需要变成document
                    document.onmousemove=document.onmouseup=null;
                }
            }
        }
    </script>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

拖拽出现的问题：

　　1、拖拽的时候，如果有文字被选中，会产生问题

　　　　　　原因：当鼠标按下的时候，如果页面有文字被选中，那么会触发浏览器默认拖拽文字的效果

　　　　　　解决：标准下：阻止默认行为 ------oDiv.onmousedown的function(){}最后return false;则可以阻止默认行为

　　　　　　　　　　非标准IE下：设置全局捕获

　　2、拖拽图片也会产生问题：原因和解决办法同上

　　设置全局捕获：

　　　　　　元素.setcapture() 当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件。当有事件发生时，就会被当前设置了全局捕获的元素所触发。

　　　　在IE下：有，并且有效果

　　　　火狐：有，没有效果

　　　　chrome：没有

　　封装：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: #37b9ff;
            position: absolute;
        }
        #img1{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 300px;
        }
    </style>
</head>
<body>
    <script>
        window.onload=function () {
            var oDiv=document.getElementById('div1');
            var oImg=document.getElementById('img1');
            drag(oImg);
            drag(oDiv);
            //封装
            function drag(obj) {
                obj.onmousedown=function (ev) {
                    var ev=ev||event;
                    var disX=ev.clientX-this.offsetLeft;
                    var disY=ev.clientY-this.offsetTop;
                    //设置全局捕获
                    if(obj.setCapture){
                        obj.setCapture();
                    }
                    document.onmousemove=function (ev) {   //用document是因为如果是oDiv.onmousemove，鼠标移动太快，会移出方块，
                        // 方块就不会跟着鼠标一起移动
                        var ev=ev||event;
                        obj.style.left=ev.clientX-disX+'px';
                        obj.style.top=ev.clientY-disY+'px';
                    }
                    document.onmouseup=function () {      //用document是因为如果是oDiv.onmouseup,当再有一个绝对定位的方块，
                        // 则在两个方块重叠部分放开鼠标，方块还是会跟着鼠标一起动。现象原因是
                        //当重叠时，鼠标点的对象会是另一个则oDiv就不起作用，所以需要变成document
                        document.onmousemove=document.onmouseup=null;
                        //释放全局捕获
                        if (obj.releaseCapture){
                            obj.releaseCapture();
                        }
                    }
                    return false;
                }
            }

        }
    </script>
    <div id="div1"></div>
    <img src="图片/7.jpg" id="img1">
</body>
</html>

磁性吸附以及控制移动范围：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: #37b9ff;
            position: absolute;
        }
        #img1{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 300px;
        }
    </style>
</head>
<body>
    <script>
        window.onload=function () {
            var oDiv=document.getElementById('div1');
            var oImg=document.getElementById('img1');
            drag(oImg);
            drag(oDiv);
            //封装
            function drag(obj) {
                obj.onmousedown=function (ev) {
                    var ev=ev||event;
                    var disX=ev.clientX-this.offsetLeft;
                    var disY=ev.clientY-this.offsetTop;
                    //设置全局捕获
                    if(obj.setCapture){
                        obj.setCapture();
                    }
                    document.onmousemove=function (ev) {   //用document是因为如果是oDiv.onmousemove，鼠标移动太快，会移出方块，
                        // 方块就不会跟着鼠标一起移动
                        var ev=ev||event;
                        var L=ev.clientX-disX;
                        var T=ev.clientY-disY;
　　　　　　　　　　　　　　　//控制移动边缘范围
                        if(L<100){//磁性吸附 ------小于100px自动吸附到边缘0px
                            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.onmouseup=function () {      //用document是因为如果是oDiv.onmouseup,当再有一个绝对定位的方块，
                        // 则在两个方块重叠部分放开鼠标，方块还是会跟着鼠标一起动。现象原因是
                        //当重叠时，鼠标点的对象会是另一个则oDiv就不起作用，所以需要变成document
                        document.onmousemove=document.onmouseup=null;
                        //释放全局捕获
                        if (obj.releaseCapture){
                            obj.releaseCapture();
                        }
                    }
                    return false;
                }
            }

        }
    </script>
    <div id="div1"></div>
    <img src="图片/7.jpg" id="img1">
</body>
</html>