拖拽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>div-drag-每天一个知识点</title>
    <style>
      .dragable {
        width: 200px;
        height: 200px;
        border: 1px solid darkorchid;
        position: absolute;
      }
      .limit {
        width: 800px;
        height: 800px;
        border: 2px dashed black;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="limit">
      <div class="dragable"></div>
    </div>
  </body>
  <script src="dragable.js"></script>
  <script>
    var dragDiv = document.querySelector(".dragable");
    var limit = document.querySelector(".limit");
    var dragable = new Dragable();
    dragable.regist(dragDiv,limit);
  </script>
</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

欢迎大家来到IT世界,在知识的湖畔探索吧!; (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);

改变大小的源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>resizable</title>
    <style>
      .resizable {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 100px;
        top: 100px;
        background-color: coral;
      }
    </style>
  </head>
  <body>
    <div class="resizable"></div>
  </body>
  <script src="resizable.js"></script>
  <script>
    var resizeDiv = document.querySelector(".resizable");
    var resizable = new Resizable();
    resizable.regist(resizeDiv);
  </script>
</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!; (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);

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/48807.html