功能實現：在滑鼠點選小方塊並拖動的時候。小方塊跟著滑鼠移動。在滑鼠點選放開的時候，小方塊停在當前位置不動。
注意：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.放大鏡以圖片為基準，所以上下左右邊界是圖片的寬高度；