模拟拖拽-小火柴博客

学习他人的博客写出来的东西，记录一下。

原博客写的比我好多了，源博客：小火柴的蓝色理想 - javascript动画系列第一篇——模拟拖拽

模拟拖拽

 

        var Div = document.getElementById('Div');

        Div.onmousedown = function(e){
            e = e || event;
            // 获取当前元素距离父级的X轴和Y轴的距离
            var x0 = this.offsetLeft;
            var y0 = this.offsetTop;
            // 获取当前鼠标距离视口左上角的X轴和Y轴的距离
            var x1 = e.clientX;
            var y1 = e.clientY;

             Div.onmousemove = function(e){
            // 【1】document.onmousemove = function(e){
                e = e || event;
                // 获取当前鼠标距离距离视口左上角的X轴和Y轴的距离
                var x2 = e.clientX;
                var y2 = e.clientY;
                // 计算元素现在所在的位置
                var x = x0 + (x2 - x1);
                var y = y0 + (y2 - y1);
                // 赋值
                Div.style.left = x + 'px';
                Div.style.top = y + 'px';
            }

             Div.onmouseup = function(e){
            //【1】 document.onmouseup = function(e){

                // 当鼠标抬起时，拖拽结束
                  Div.onmousemove = null;
                // 【1】document.onmousemove = null;
            }
        }

 

　　此时的代码有个小问题，就是在鼠标移动过快时，图片会不动。这是因为鼠标拖动的太快，比onmousemove事件的触发间隔还要快时，鼠标就会从元素上离开。这样就停止了元素的拖拽过程
解决这个小bug需要把onmouseover和onmouseup事件添加到document上便可以解决（将【1】处的代码将它
上一行的代码替换）