拖拽

<code>

  
    
    
    <title>div-drag-每天一個知識點/<title>
    
  
  
    

      

    

  
  
  

/<code>

<code>; (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.x<limitrect.left>            pos.x = limitRect.left;
        }
        if(pos.y<limitrect.top>            pos.y = limitRect.top;
        }
        if(pos.x+dragRect.width>limitRect.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);/<limitrect.top>/<limitrect.left>/<code>

改變大小的源碼

<code>

  
    
    
    <title>resizable/<title>
    
  
  
    

  
  
  

/<code>

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

閱讀更多 景柯學 的文章

關鍵字: HTML 源碼