拖拽demo-整理

功能实现：在鼠标点击小方块并拖动的时候。小方块跟着鼠标移动。在鼠标点击放开的时候，小方块停在当前位置不动。
注意：1.在鼠标点击下，鼠标拖动才能移动。
2.拖动的原理：把鼠标与页面的距离赋值给方块，二者与页面的距离一致，看起来像鼠标拖着方块走
3.鼠标指针对于浏览器页面的水平/垂直距离：event.clientX，event.clientY
4.点击方块的时候，鼠标可以在方块的任何一个位置，我们也需要获取这个位置的水平、垂直距离。因为在移动的过程中，假装“拖拽”，鼠标在方块内的位置是不变的。此距离=鼠标的距离- 方块与页面的距离，即：event.clientX-div.offsetLeft，在鼠标点下的事件中获取。
5.“拖拽”的过程中，是鼠标移动事件，鼠标的距离在不断地变化，然后鼠标在方块内的距离不变。用鼠标水平/垂直距离-此固定距离，获得的距离就是方块的距离。
代码部分：

var div1 = document.getElementById('div1');
       
        var disX = 0;var disY = 0;
       //鼠标按下事件，获取disX和disY
        div1.onmousedown = function(e){
            var oEvent = e || event;
            disX = oEvent.clientX-div1.offsetLeft;
            disY = oEvent.clientY-div1.offsetTop;

            document.onmousemove = function(e){

                var oEvent = e || event;
                var r = oEvent.clientX-disX;
                var t = oEvent.clientY-disY;
              
                div1.style.left = r+'px';
                div1.style.top = t+'px';
            };
            document.onmouseup= function(){
                document.onmousemove = null;
                div1.onmouseup = null;
            };
        };

放大镜
1.与上述拖拽不同的是：每次“放大镜”都以鼠标为中心，即鼠标在方块的中点
2.放大镜以图片为基准，所以上下左右边界是图片的宽高度；