js 实现拖拽滚动、滚轮缩放元素函数和案例

文章目录

  • 一、拖拽滚动
    • 1、封装函数
    • 2、示例:
  • 二、滚轮缩放
    • 1、封装函数
    • 2、结合拖拽滚动示例

一、拖拽滚动

1、封装函数

    /**
     * @description 使用鼠标拖拽div,实现横向、纵向滚动
     * @param el 被拖拽滚动的元素(产生滚动条的元素)
     */
    function addDragable(el) {
        let startX = 0; // el的scroll横向初始位置
        let gapX = 0; // 鼠标点击时的横向初始位置
        let startY = 0; // el的scroll纵向向初始位置
        let gapY = 0; // 鼠标点击时的纵向初始位置
        el.addEventListener("mousedown", start);
        el.addEventListener("mouseleave", stop); // 移除时解除事件
        
        function start(event) {
            // 判断是否点击鼠标左键
            if (event.button == 0) {
                gapX = event.clientX;
                gapY = event.clientY;
                startX = el.scrollLeft;
                startY = el.scrollTop;
                el.addEventListener("mousemove", move); // document
                el.addEventListener("mouseup", stop);
            }
            // event.preventDefault(); // 阻止默认事件或冒泡 如拖拽时选中文本
            return false;
        }
        function move(event) {
            // 移动时的坐标 - 鼠标左键点击时的坐标 = 鼠标移动的相对距离
            var left = event.clientX - gapX;
            var top = event.clientY - gapY;
            // 滚动条初始坐标 - 移动的相对距离 = 应该滚动后的坐标
            el.scrollTo(startX - left, startY - top); // 横向 纵向
            return false;
        }
        function stop() {
            // 鼠标松开,解除绑定
            el.removeEventListener("mousemove", move, false);
            el.removeEventListener("mouseup", stop, false);
        }
    }

2、示例:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现元素拖拽滚动title>
head>

<body>
    <div id="dragableWrapper" class="wrapper">
        <div id="dragable">
            <h2>实现元素拖拽滚动(不会因拖拽被选中的文字,按情形选一既可。)h2>
            <h2>js做法:event.preventDefault(); 阻止默认事件或冒泡;h2>
            <h2>css做法:user-select: none;h2>
            <div class="row">
                <div class="box">div>
                <div class="box">div>
                <div class="box">div>
                <div class="box">div>
                <div class="box">div>
            div>
            <div class="row">
                <div class="box">div>
                <div class="box">div>
                <div class="box">div>
                <div class="box">div>
                <div class="box">
                    <copyright class="copyright">
                        GeniusXYT:
                        <a href="https://blog.csdn.net/GeniusXYT/article/details/124198758">
                            https://blog.csdn.net/GeniusXYT/article/details/124198758
                        a>
                        (转发请注明出处)
                    copyright>
                div>
            div>
        div>
    div>
body>

<script>
    /**
     * @description 使用鼠标拖拽div,实现横向、纵向滚动
     * @param el 被拖拽滚动的元素(产生滚动条的元素)
     */
    function addDragable(el) {
        let startX = 0; // el的scroll横向初始位置
        let gapX = 0; // 鼠标点击时的横向初始位置
        let startY = 0; // el的scroll纵向向初始位置
        let gapY = 0; // 鼠标点击时的纵向初始位置
        el.addEventListener("mousedown", start);
        el.addEventListener("mouseleave", stop); // 移除时解除事件
        
        function start(event) {
            // 判断是否点击鼠标左键
            if (event.button == 0) {
                gapX = event.clientX;
                gapY = event.clientY;
                startX = el.scrollLeft;
                startY = el.scrollTop;
                el.addEventListener("mousemove", move); // document
                el.addEventListener("mouseup", stop);
            }
            // event.preventDefault(); // 阻止默认事件或冒泡 如拖拽时选中文本
            return false;
        }
        function move(event) {
            // 移动时的坐标 - 鼠标左键点击时的坐标 = 鼠标移动的相对距离
            var left = event.clientX - gapX;
            var top = event.clientY - gapY;
            // 滚动条初始坐标 - 移动的相对距离 = 应该滚动后的坐标
            el.scrollTo(startX - left, startY - top); // 横向 纵向
            return false;
        }
        function stop() {
            // 鼠标松开,解除绑定
            el.removeEventListener("mousemove", move, false);
            el.removeEventListener("mouseup", stop, false);
        }
    }

    addEventListener("onload", addDragable(document.getElementById("dragableWrapper")))

script>

<style>
    .wrapper {
        width: 1000px;
        height: 500px;
        padding: 200px;
        overflow: auto;
        border: 2px ridge rgb(65, 194, 227);
    }


    h2 {
        user-select: none;
    }

    .row {
        user-select: none;
        white-space: nowrap;
    }

    .box {
        display: inline-block;
        width: 300px;
        height: 300px;
        background-color: rgb(43, 229, 235);
    }

    .row:last-child .box:last-child {
        position: relative;
    }

    .row:last-child .box:last-child .copyright {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 12px;
        opacity: .2;
    }
style>

html>

二、滚轮缩放

1、封装函数

	/**
     * @description 滚轮缩放元素
     * @param targetEl 被缩放目标元素
     * @param wrapperEl 产生缩放的包裹元素,默认是targetEl的父元素
     */
    function addScale(targetEl, wrapperEl) {
        var scale = 1; // 初始缩放比率
        var scalePercent = 0.2; // 缩放系数(越大缩放跨度越大)
        var minScale = 0.1; // 最小缩放比率
        var maxScale = 5; // 最大缩放比率
        var transformOrigin = "left top"; // 以左上角为基准点,不会造成元素超出左、上边界而没有滚动条问题

        wrapperEl = wrapperEl || targetEl.parentElement; // 默认取父元素
        wrapperEl.addEventListener("mousewheel", onMouseWheel);

        // 鼠标滚轮事件
        function onMouseWheel(e) {
            // var e = e || window.e;
            var down = true; // 定义向下滚动的标志
            down = e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0;
            // 鼠标滚轮向下缩小
            if (down) {
                scale = (parseFloat(scale) - scalePercent).toFixed(2);
                if (scale > minScale) {
                    targetEl.style.transform = "scale(" + scale + ")";
                    targetEl.style.transformOrigin = transformOrigin;
                } else {
                    scale = minScale;
                }
            } else {
                // 鼠标滚轮向上放大
                scale = (parseFloat(scale) + scalePercent).toFixed(2);

                if (scale < maxScale) {
                    targetEl.style.transform = "scale(" + scale + ")";
                    targetEl.style.transformOrigin = transformOrigin;
                } else {
                    scale = maxScale;
                }
            }
            if (e.preventDefault) {
                /*FF 和 Chrome*/
                e.preventDefault(); // 阻止默认事件
            }
            return false;
        }
    }

2、结合拖拽滚动示例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现元素拖拽滚动title>
head>

<body>
    <div id="dragableWrapper" class="wrapper">
        <div id="dragable">
            <h2>实现元素拖拽滚动(不会因拖拽被选中的文字,按情形选一既可。)h2>
            <h2>js做法:event.preventDefault(); 阻止默认事件或冒泡;h2>
            <h2>css做法:user-select: none;h2>
            <div class="row">
                <div class="box">div>
                <div class="box">div>
                <div class="box">div>
                <div class="box">div>
                <div class="box">div>
            div>
            <div class="row">
                <div class="box">div>
                <div class="box">div>
                <div class="box">div>
                <div class="box">div>
                <div class="box">
                    <copyright class="copyright">
                        GeniusXYT:
                        <a href="https://blog.csdn.net/GeniusXYT/article/details/124198758">
                            https://blog.csdn.net/GeniusXYT/article/details/124198758
                        a>
                        (转发请注明出处)
                    copyright>
                div>
            div>
        div>
    div>
body>

<script>
    /**
     * @description 使用鼠标拖拽div,实现横向、纵向滚动
     * @param el 被拖拽滚动的元素(产生滚动条的元素)
     */
    function addDragable(el) {
        let startX = 0; // el的scroll横向初始位置
        let gapX = 0; // 鼠标点击时的横向初始位置
        let startY = 0; // el的scroll纵向向初始位置
        let gapY = 0; // 鼠标点击时的纵向初始位置
        el.addEventListener("mousedown", start);
        el.addEventListener("mouseleave", stop); // 移除时解除事件
        
        function start(event) {
            // 判断是否点击鼠标左键
            if (event.button == 0) {
                gapX = event.clientX;
                gapY = event.clientY;
                startX = el.scrollLeft;
                startY = el.scrollTop;
                el.addEventListener("mousemove", move); // document
                el.addEventListener("mouseup", stop);
            }
            // event.preventDefault(); // 阻止默认事件或冒泡 如拖拽时选中文本
            return false;
        }
        function move(event) {
            // 移动时的坐标 - 鼠标左键点击时的坐标 = 鼠标移动的相对距离
            var left = event.clientX - gapX;
            var top = event.clientY - gapY;
            // 滚动条初始坐标 - 移动的相对距离 = 应该滚动后的坐标
            el.scrollTo(startX - left, startY - top); // 横向 纵向
            return false;
        }
        function stop() {
            // 鼠标松开,解除绑定
            el.removeEventListener("mousemove", move, false);
            el.removeEventListener("mouseup", stop, false);
        }
    }


    /**
     * @description 滚轮缩放元素
     * @param targetEl 被缩放目标元素
     * @param wrapperEl 产生缩放的包裹元素,默认是targetEl的父元素
     */
    function addScale(targetEl, wrapperEl) {
        var scale = 1; // 初始缩放比率
        var scalePercent = 0.2; // 缩放系数(越大缩放跨度越大)
        var minScale = 0.1; // 最小缩放比率
        var maxScale = 5; // 最大缩放比率
        var transformOrigin = "left top"; // 以左上角为基准点,不会造成元素超出左、上边界而没有滚动条问题

        wrapperEl = wrapperEl || targetEl.parentElement; // 默认取父元素
        wrapperEl.addEventListener("mousewheel", onMouseWheel);

        // 鼠标滚轮事件
        function onMouseWheel(e) {
            // var e = e || window.e;
            var down = true; // 定义向下滚动的标志
            down = e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0;
            // 鼠标滚轮向下缩小
            if (down) {
                scale = (parseFloat(scale) - scalePercent).toFixed(2);
                if (scale > minScale) {
                    targetEl.style.transform = "scale(" + scale + ")";
                    targetEl.style.transformOrigin = transformOrigin;
                } else {
                    scale = minScale;
                }
            } else {
                // 鼠标滚轮向上放大
                scale = (parseFloat(scale) + scalePercent).toFixed(2);

                if (scale < maxScale) {
                    targetEl.style.transform = "scale(" + scale + ")";
                    targetEl.style.transformOrigin = transformOrigin;
                } else {
                    scale = maxScale;
                }
            }
            if (e.preventDefault) {
                /*FF 和 Chrome*/
                e.preventDefault(); // 阻止默认事件
            }
            return false;
        }
    }

    addEventListener("onload", addDragable(document.getElementById("dragableWrapper")))
    addEventListener("onload", addScale(document.getElementById("dragable")))
    // addEventListener("onload", addScale(document.getElementById("dragable"), document.getElementById("dragable"))) // 仅在元素本身生效

script>

<style>
    .wrapper {
        width: 1000px;
        height: 500px;
        padding: 200px;
        overflow: auto;
        border: 2px ridge rgb(65, 194, 227);
    }


    h2 {
        user-select: none;
    }

    .row {
        user-select: none;
        white-space: nowrap;
    }

    .box {
        display: inline-block;
        width: 300px;
        height: 300px;
        background-color: rgb(43, 229, 235);
    }

    .row:last-child .box:last-child {
        position: relative;
    }

    .row:last-child .box:last-child .copyright {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 12px;
        opacity: .2;
    }
style>

html>

如有帮助请

  • 点赞
  • 收藏
  • 转发

你可能感兴趣的:(js,vue,前端,js)