使用js在瀏覽器的頁面中隨意地拖拽圖片

程式碼：
<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>在瀏覽器的頁面中隨意拖拽圖片</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #img1{
                width: 150px;
                position: absolute;
                left: 120px;
                top: 120px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                var img = document.getElementById("img1");
                dragImg(img);
            };
            //設計一個專門用來拖拽圖片的函數  obj引數 就是待拖拽的元素
            function dragImg(obj) {
                //理清邏輯 當滑鼠的指標剪頭在待拖拽的元素的上方按下是 開始進行拖拽
                obj.onmousedown = function (event){
                    //為了相容IE8  下面這行程式碼錶示你有這個就執行
                    //瀏覽器有一個預設行為 就是你選種的元素有一個拖拽的效果 拉到導航欄中可以搜尋的那個捕獲ta
                    obj.setCaptue && obj.setCaptue();
                    //也是為了相容IE8 window.event(IE8) 它的事件物件屬性在window中
                    event = event || window.event;
                    //獲取偏移量 保持滑鼠的指標 不動  offsetLeft返回當前元素左上角相對於 HTMLElement.offsetParent節點的左邊界偏移的畫素值。
                    //偏移量 offset
                    var ox = event.clientX - obj.offsetLeft;
                    var oy = event.clientY - obj.offsetTop;
                    //開始進行滑鼠的移動 然後圖片的移動
                    document.onmousemove = function (event) {
                        event = event ||window.event;
                        //當滑鼠移動時 被拖拽元素跟移動
                        //獲取滑鼠的二維座標
                        var left = event.clientX - ox;
                        var top = event.clientY - oy;

                        //修改圖片的位置
                        obj.style.left = left +"px";
                        obj.style.top = top +"px";
                    };
                    //移動完成後 滑鼠的一個鬆開的事件
                    document.onmouseup = function () {
                        //當滑鼠鬆開的時候 這個圖片  被固定在當前的位置
                        //取消滑鼠的移動事件 和 ta被鬆開的事件
                        document.onmousemove = null;
                        document.onmouseup = null;
                        //瀏覽器有一個預設行為 就是你選種的元素有一個拖拽的效果 拉到導航欄中可以搜尋的那個
                        //取消對ta的捕獲
                        obj.releaseCapture && obj.releaseCapture();
                    };
                    /*
                     * 當我們拖拽一個網頁中的內容時，瀏覽器會預設去搜尋引擎中搜尋內容，
                     * 此時會導致拖拽功能的異常，這個是瀏覽器提供的預設行為，
                     * 如果不希望發生這個行為，則可以通過return false來取消預設行為
                     * 但是這招對IE8不起作用 IE8用這個obj.releaseCapture && obj.releaseCapture();
                     */
                    return false;
                };
            }

        </script>
    </head>
    <body>
        <img id="img1" src="img/test.jpg" alt="測試圖片">
    </body>
</html>
在這裡插入圖片描述
中間那個滑鼠剪頭位置點上去不變就是把他這個差值弄清楚。
然後最後的效果展示：