原生js模态框的拖拽和缩放

1.效果演示

模态框的拖拽和缩放

2.盒子布局

<div id="box">
        <div id="drag">
            <div id="title">
                拖拽
            </div>
            <div class="inp">
                账户：<input type="text">
            </div>
            <div class="inp">
                密码：<input type="text">
            </div>
            <div id="scale"></div>
        </div>
    </div>

 3.css样式（样式可以自己改）

* {
    margin: 0;
    padding: 0
}

#box {
    width: 100%;
    height: 1000px;
    position: relative;
}
#title{
    width: 100%;
    background-color: aqua;
    text-align: center;
}
#drag {
    width: 200px;
    height: 200px;
    position: relative;
    background: #d6d4d9;
    cursor: move;
}

#scale {
    width: 20px;
    height: 20px;
    position: absolute;
    cursor:nw-resize;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.inp{
    width: 100%;
}

 4.原生js拖拽方法

//拖拽方法
    function dragTop(node) {
        //鼠标落下
        node.onmousedown = function (ev) {
            //浏览器兼容处理
            var e = ev || window.event;
            //点击鼠标记录当前位置
            //水平方向 = 鼠标左边距离 - 被拖拽元素距离左边距离
            var offsetX = e.clientX - node.offsetLeft;
            //垂直方向 = 鼠标上边距离 - 被拖拽元素距离上边距离
            var offsetY = e.clientY - node.offsetTop;
            //鼠标移动在document上
            document.onmousemove = function (ev) {
                //当前鼠标事件对象
                var e = ev || window.event;
                //拖拽元素左边距离 = 当前鼠标左边距离 - 距离左边距离
                var currentLeft = e.clientX - offsetX;
                //拖拽元素上边距离 = 当前鼠标上边距离 - 距离上边距离
                var currentTop = e.clientY - offsetY;
                //限制出界
                if (currentLeft <= 0) {
                    currentLeft = 0;
                }
                //窗口宽度
                var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
                if (currentLeft >= windowWidth - node.offsetWidth) {
                    currentLeft = windowWidth - node.offsetWidth
                }
                if (currentTop <= 0) {
                    currentTop = 0;
                }
                //窗口高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                if (currentTop >= windowHeight - node.offsetHeight) {
                    currentTop = windowHeight - node.offsetHeight
                }
                node.style.left = currentLeft+'px';
                node.style.top = currentTop+'px';
            }
            //鼠标抬起取消拖拽
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
    }

 函数dragTop里面的参数是你通过document获取到需要拖拽的盒子元素。

5.原生js缩放方法

// 缩放
    function scaleTool(drag, scale, box) {
        scale.onmousedown = function (e) {
            //阻止冒泡 避免缩放触发移动事件
            e.stopPropagation()
            // 取消事件的默认动作
            e.preventDefault()
            // 定义position
            var position = {
                'w': drag.offsetWidth, // 被缩放元素的offsetWidth
                'h': drag.offsetHeight, // 被缩放元素的offsetHeight
                'x': e.clientX, // 当前窗口鼠标指针的水平坐标
                'y': e.clientY, // 当前窗口鼠标指针的垂直坐标
            }
            drag.onmousemove = function (ev) {
                ev.preventDefault()
                // 设置最大缩放为30*30 Math.max取最大值 
                var w = Math.max(200, ev.clientX - position.x + position.w)
                var h = Math.max(200, ev.clientY - position.y + position.h)

                // 设置最大的宽高
                w = w >= box.offsetWidth - drag.offsetLeft ? box.offsetWidth - drag.offsetLeft : w;
                h = h >= box.offsetHeight - drag.offsetTop ? box.offsetHeight - drag.offsetTop : h;
                drag.style.width = w + 'px';
                drag.style.height = h + 'px';
            }
            // 鼠标离开和抬起取消缩放
            drag.onmouseup = function () {
                drag.onmousemove = null;
                drag, onmouseup = null;
            }
            drag.onmouseleave = function () {
                drag.onmousemove = null;
                drag, onmouseup = null;
            }
        }
    }

函数scaleTool中需要传递三个参数，第一个参数是需要缩放的盒子，第二个参数是能够使鼠标缩放的区域，第三个参数是外层最大的盒子。

6.js文件全部代码（页面加载完成调用这两个方法）

window.onload = function () {
    var box = document.getElementById('box')
    var drag = document.getElementById('drag')
    var scale = document.getElementById('scale')
    //调用拖拽方法
    dragTop(drag)
    //调用缩放方法
    scaleTool(drag, scale, box)
    //拖拽方法
    function dragTop(node) {
        //鼠标落下
        node.onmousedown = function (ev) {
            //浏览器兼容处理
            var e = ev || window.event;
            //点击鼠标记录当前位置
            //水平方向 = 鼠标左边距离 - 被拖拽元素距离左边距离
            var offsetX = e.clientX - node.offsetLeft;
            //垂直方向 = 鼠标上边距离 - 被拖拽元素距离上边距离
            var offsetY = e.clientY - node.offsetTop;
            //鼠标移动在document上
            document.onmousemove = function (ev) {
                //当前鼠标事件对象
                var e = ev || window.event;
                //拖拽元素左边距离 = 当前鼠标左边距离 - 距离左边距离
                var currentLeft = e.clientX - offsetX;
                //拖拽元素上边距离 = 当前鼠标上边距离 - 距离上边距离
                var currentTop = e.clientY - offsetY;
                //限制出界
                if (currentLeft <= 0) {
                    currentLeft = 0;
                }
                //窗口宽度
                var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
                if (currentLeft >= windowWidth - node.offsetWidth) {
                    currentLeft = windowWidth - node.offsetWidth
                }
                if (currentTop <= 0) {
                    currentTop = 0;
                }
                //窗口高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                if (currentTop >= windowHeight - node.offsetHeight) {
                    currentTop = windowHeight - node.offsetHeight
                }
                node.style.left = currentLeft+'px';
                node.style.top = currentTop+'px';
            }
            //鼠标抬起取消拖拽
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
    }
    // 缩放
    function scaleTool(drag, scale, box) {
        scale.onmousedown = function (e) {
            //阻止冒泡 避免缩放触发移动事件
            e.stopPropagation()
            // 取消事件的默认动作
            e.preventDefault()
            // 定义position
            var position = {
                'w': drag.offsetWidth, // 被缩放元素的offsetWidth
                'h': drag.offsetHeight, // 被缩放元素的offsetHeight
                'x': e.clientX, // 当前窗口鼠标指针的水平坐标
                'y': e.clientY, // 当前窗口鼠标指针的垂直坐标
            }
            drag.onmousemove = function (ev) {
                ev.preventDefault()
                // 设置最大缩放为30*30 Math.max取最大值 
                var w = Math.max(200, ev.clientX - position.x + position.w)
                var h = Math.max(200, ev.clientY - position.y + position.h)

                // 设置最大的宽高
                w = w >= box.offsetWidth - drag.offsetLeft ? box.offsetWidth - drag.offsetLeft : w;
                h = h >= box.offsetHeight - drag.offsetTop ? box.offsetHeight - drag.offsetTop : h;
                drag.style.width = w + 'px';
                drag.style.height = h + 'px';
            }
            // 鼠标离开和抬起取消缩放
            drag.onmouseup = function () {
                drag.onmousemove = null;
                drag, onmouseup = null;
            }
            drag.onmouseleave = function () {
                drag.onmousemove = null;
                drag, onmouseup = null;
            }
        }
    }
}

7.总结：说白了拖拽功能就是通过获取鼠标的坐标去改变被拖拽盒子水平方向的距离和垂直方向上的距离；缩放功能也是通过获取鼠标的坐标去改变盒子的宽高。