拖拽

; (function (root) {
//定义组件函数
    var Dragable = function () {};
//判读对象是否为dom对象
    function isElement(element) {
        return element instanceof Element || element instanceof HTMLDocument;
    }
    /**
     * 
     * @param {新的位置} pos 
     * @param {拖动div信息} dragRect 
     * @param {外层div信息} limitRect 
     */
    function calcPosition(pos,dragRect,limitRect){
        if(pos.xlimitRect.left+limitRect.width){
            pos.x = limitRect.left+limitRect.width-dragRect.width;
        }
        if(pos.y+dragRect.height>limitRect.top+limitRect.height){
            pos.y = limitRect.top+limitRect.height-dragRect.height
        }
        return pos;
    }
Dragable.prototype.regist = function (el, limit) {
        //传入的对象必须为dom对象，limit也是
        if (!isElement(el)) {
            console.error("the el must be dom elment");
            return;
        }
        var limitRect = null;
        if (limit && isElement(limit)) {
            limitRect = limit.getBoundingClientRect();
        }
//convert the elent to absolute
        el.style.position = 'absolute';
        el.addEventListener('mousedown', function (e) {
var dragRect = el.getBoundingClientRect();
            //获取x坐标和y坐标
            var downX = e.clientX;
            var downY = e.clientY;
//开关打开
            var isDown = true;
            //设置样式
            el.style.cursor = 'move';
window.onmousemove = function (e) {
                if (!isDown) {
                    return;
                }
                var newLeft = e.clientX - downX + dragRect.left;
                var newTop = e.clientY - downY + dragRect.top;
var newPos = calcPosition({x:newLeft,y:newTop},dragRect,limitRect);
el.style.left = newPos.x + 'px';
                el.style.top = newPos.y + 'px';
return false;
            }
window.onmouseup = function (e) {
                //开关关闭
                isDown = false;
                el.style.cursor = 'default';
                return false;
            }
            e.preventDefault();
        });
}
//将组件挂在到window对象
    root.Dragable = Dragable;
})(window);

改变大小的源码

; (function (root, document) {
    //定义拖动边缘点的信息
    const p = "-10px";
    var pointMap = [
        {
            class: "nw",
            top: p,
            left: p,
            cursor: 'nw-resize'
        },
        {
            class: "ne",
            right: p,
            top: p,
            cursor: 'ne-resize'
        },
        {
            class: "ws",
            left: p,
            bottom: p,
            cursor: 'sw-resize'
        },
        {
            class: "se",
            right: p,
            bottom: p,
            cursor: 'se-resize'
        },
        {
            class: "n",
            top: p,
            left: "50%",
            transform: "translateX(-50%)",
            cursor: 'n-resize'
        },
        {
            class: "w",
            left: p,
            top: "50%",
            transform: "translateY(-50%)",
            cursor: 'w-resize'
        },
        {
            class: "s",
            bottom: p,
            left: "50%",
            transform: "translateX(-50%)",
            cursor: 's-resize'
        },
        {
            class: "e",
            right: "-10px",
            top: "50%",
            transform: "translateY(-50%)",
            cursor: 'e-resize'
        }
    ];
/**
     * 
     * @param {在目标div周围生成一个边框，用于拖拽} el 
     */
    function createBorder() {
        let border = document.createElement("div");
        let position = ["left", "top", "right", "bottom"].map(pos => {
            return pos + ":-7px";
        });
        border.setAttribute("style", "position:absolute;" + position.join(";") + ";border:blue 1px solid");
        return border;
    }
    function createPoint(el) {
        const points = [];
        pointMap.map(point => {
            let pointBlock = document.createElement("div");
            let style = "position:absolute;width:5px;height:5px;background-color: blue;border:1px solid blue";
            for (let [k, v] of Object.entries(point)) {
                if ("class" === k) {
                    pointBlock.className = v;
                } else {
                    style += ";" + k + ":" + v;
                }
            }
            pointBlock.setAttribute("style", style);
            pointBlock.onmousedown = function (e) {
                let targetRect = el.getBoundingClientRect();
                let data = {
                    downX: e.clientX,
                    downY: e.clientY,
                    oldWith: targetRect.width,
                    oldHeight: targetRect.height,
                    oldLeft: targetRect.left,
                    oldTop: targetRect.top
                };
                let resizing = true;
                window.onmousemove = function (we) {
                    if (!resizing) { return; }
                    Object.assign(data, { newX: we.clientX, newY: we.clientY });
                    let fun = resizeFuncs(el)[pointBlock.className];
                    if (fun) {
                        fun.call(pointBlock, data, we);
                    }
                };
                window.onmouseup = function (wue) {
                    resizing = false;
                    wue.stopPropagation()
                }
                e.stopPropagation()
            };
            points.push(pointBlock);
        });
        return points;
    }
const resizeFuncs = function (el) {
        const funcs = {
            canResize: function (style, newValue, size) {
                if (size > 20) {
                    Object.assign(style, { ...newValue });
                }
            },
            e: function (data) {
                const newWidth = data.oldWith + data.newX - data.downX;
                funcs.canResize(el.style, { width: newWidth + "px" }, newWidth)
            },
            s: function (data) {
                const newHeight = data.oldHeight + data.newY - data.downY;
                funcs.canResize(el.style, { height: newHeight + "px" }, newHeight)
            },
            w: function (data) {
                const newWidth = data.oldWith + (data.downX - data.newX);
                funcs.canResize(el.style, { left: data.oldLeft + data.newX - data.downX + "px", width: newWidth + "px" }, newWidth)
            },
            n: function (data) {
                const newHeight = data.oldHeight + (data.downY - data.newY);
                funcs.canResize(el.style, { top: data.oldTop + data.newY - data.downY + "px", height: newHeight + "px" }, newHeight)
            },
            se: function (data) {
                funcs.s(data);
                funcs.e(data);
            },
            ne: function (data) {
                funcs.n(data);
                funcs.e(data);
            },
            nw: function (data) {
                funcs.n(data);
                funcs.w(data);
            },
            ws: function (data) {
                funcs.w(data);
                funcs.s(data);
            }
        }
        return funcs;
    }
var Resizable = function () { };
Resizable.prototype.regist = function (el) {
        const border = createBorder();
        el.appendChild(border);
const points = createPoint(el);
        points.map(p => el.appendChild(p))
    }
window.Resizable = Resizable;
})(window, document);