css

* {
    padding:0;
    margin:0;
}
html,body {
    height:100%;
}
.bbox {
    background-color:#3B51A2
}
.box,.box2,.box3 {
    position:absolute;
    width:200px;
    height:200px;
    border:1px solid #eee;
    background-color:#323C6C;
}
.box2 {
    background-color:#4AAF59;
}
.box3 {
    background-color:#F19A4E;
}

html

<div class="bbox">
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

js

$.fn.extend({

    lzhDrag: function (obj) {
        let max_left = $(this).offsetParent().outerWidth() - $(this).outerWidth(),
            max_top = $(this).offsetParent().outerHeight() - $(this).outerHeight();
        $(this).on('mousedown', event => {
            let ele_x = event.offsetX,
                ele_y = event.offsetY;
            obj.startDown && obj.startDown();
            $(document).on('mousemove', e => {
                obj.startMove && obj.startMove();
                e.preventDefault();
                let left = e.clientX - ele_x,
                    top = e.clientY - ele_y;
                left = left < 0 ? 0 : left;
                top = top < 0 ? 0 : top;
                left = left > max_left ? max_left : left;
                top = top > max_top ? max_top : top;
                $(this).css({
                    left, top
                })
            })
        })
        $(document).on('mouseup', () => {

            $(document).off('mousemove');
            obj.overMove && obj.overMove();
        })
        return this;
    }
})
    
/**
            * 
            lzhDrag()有一个参数，参数为对象
                startDown：鼠标按下的时候会触发的函数
                startMove：鼠标开始移动触发的函数
                overMove：移动对象停止移动时触发函数（拖拽事件鼠标抬起触发）
            */
        $(".box").lzhDrag({
            startDown: function () {
                console.log("down");
            },
            startMove: function () {
                console.log("startmove");
            },
            overMove: function () {
                console.log("move");
            }
        }).html("box1");
        
        $(".box2").lzhDrag({
            startDown: function () {
                console.log("down");
            },
            startMove: function () {
                console.log("startmove");
            },
            overMove: function () {
                console.log("move");
            }
        }).html("box2");
        
        $(".box3").lzhDrag({
            startDown: function () {
                console.log("down");
            },
            startMove: function () {
                console.log("startmove");
            },
            overMove: function () {
                console.log("move");
            }
        }).html("box3");