拖拽的原理及封装

拖拽简单点来说就是不停的更改物体到页面左边&顶部的距离！

Paste_Image.png

当鼠标按下的时候（onmousedown），我们获取
鼠标距离左边&顶部 的值：clientX、clientY
物体距离左边&顶部的值：offsetLeft、offsetTop
当鼠标移动的时候（onmousemove），我们获取
鼠标距离左边&顶部的值：clientX、clientY
同时鼠标距离物体左边&顶部的值已经计算出了，
那么物体距离左边&顶部的值，就会得出物体的left&top值。

推拽函数封装

 function drag(obj) {
 
 
    obj.onmousedown = function(ev) {
        var ev = ev || event;
        
        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;

    /*1.拖拽的时候，如果有文字被选中，会产生问题
          原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果。
        解决：
            标准：阻止默认行为
            非标准ie：全局捕获
                        拖拽图片会有问题，原因，解决的办法同上 */

        if ( obj.setCapture ) {
            obj.setCapture();
        }
        
        document.onmousemove = function(ev) {
            var ev = ev || event;
            
            obj.style.left = ev.clientX - disX + 'px';
            obj.style.top = ev.clientY - disY + 'px';
        }
        
        document.onmouseup = function() {
            document.onmousemove = document.onmouseup = null;
            //释放全局捕获 releaseCapture();
            if ( obj.releaseCapture ) {
                obj.releaseCapture();
            }
        }       
        return false;       
    }   
}