dom 拖拽样式_js拖拽和改变大小源码

拖拽

      div-drag-每天一个知识点

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

改变大小的源码

      resizable

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