JS 实现控件拖拽/拖动

下面是实现控件拖拽的完整代码。

(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);