下面是實現控制元件拖拽的完整程式碼。

(function ($) {
    var move = false;           //標記控制元件是否處於被拖動狀態
    var dragOffsetX = 0;        //控制元件左邊界和滑鼠X軸的差
    var dragOffsetY = 0;        //控制元件上邊界和滑鼠Y軸的差
    var dragObj = null;         //用於儲存當前物件

    $.fn.mydrag = function () {
        dragObj = this;

        this.mousedown(function (e) {
            move = true;

            //獲取滑鼠和該控制元件的位置偏移量，並存入全域性變數供後續呼叫
            dragOffsetX = e.clientX - e.currentTarget.offsetLeft;
            dragOffsetY = e.clientY - e.currentTarget.offsetTop;
        });

        $(document).mousemove(function (e) {
            if (move) {
                //不斷獲取滑鼠新的座標，並計算出控制元件的新座標
                var newX = e.clientX - dragOffsetX;
                var newY = e.clientY - dragOffsetY;

                //邊界控制，document.documentElement.clientWidth：可見區域寬度  document.documentElement.clientHeight：可見區域高度
                newX = newX < 0 ? 0 : newX;
                newY = newY < 0 ? 0 : newY;
                newX = newX > (document.documentElement.clientWidth - dragObj.outerWidth()) ? (document.documentElement.clientWidth - dragObj.outerWidth()) : newX;
                newY = newY > (document.documentElement.clientHeight - dragObj.outerHeight()) ? (document.documentElement.clientHeight - dragObj.outerHeight()) : newY;

                //把新的座標重新賦值給控制元件
                dragObj.css({ left: newX + "px", top: newY + "px", position: 'absolute' });
            }
        });

        $(document).mouseup(function () {
            if (move) {
                move = false;
            }
        });
    };
})(jQuery);
 

使用方法：

1、建一個js檔案，將上述程式碼貼進去。

2、將該js檔案引入頁面。

3、呼叫方法：$("#id").mydrag();

或者還可以用下面這個外掛替換上面這個外掛，用法完全一樣，效果有一點點不一樣，可以自己體會。

(function ($) {
    var dragOffsetX = 0;        //控制元件左邊界和滑鼠X軸的差
    var dragOffsetY = 0;        //控制元件上邊界和滑鼠Y軸的差

    $.fn.mydrag = function () {
        this.mousedown(function (e) {
            //獲取滑鼠和該控制元件的位置偏移量，並存入全域性變數供後續呼叫
            dragOffsetX = e.clientX - e.currentTarget.offsetLeft;
            dragOffsetY = e.clientY - e.currentTarget.offsetTop;
        });

        this[0].ondragend = this[0].ondrag = function (e) {
            //不斷獲取滑鼠新的座標，並計算出控制元件的新座標
            var newX = e.clientX - dragOffsetX;
            var newY = e.clientY - dragOffsetY;

            //邊界控制，document.documentElement.clientWidth：可見區域寬度  document.documentElement.clientHeight：可見區域高度
            newX = newX < 0 ? 0 : newX;
            newY = newY < 0 ? 0 : newY;
            newX = newX > (document.documentElement.clientWidth - this.width) ? (document.documentElement.clientWidth - this.width) : newX;
            newY = newY > (document.documentElement.clientHeight - this.height) ? (document.documentElement.clientHeight - this.height) : newY;

            //把新的座標重新賦值給控制元件
            $(this).css({ left: newX + "px", top: newY + "px", position: 'absolute' });
        };
    };
})(jQuery);