原生js拖拽与吸附(touch+translate+css3)

最新推荐文章于 2024-05-22 12:00:48 发布

约德尔蒙

最新推荐文章于 2024-05-22 12:00:48 发布

阅读量1.7k

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/74276445

版权

Js 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .father {
            height: 300px;
            width: 99%;
            border: 1px solid red;
            margin: 0 auto;
            overflow: hidden;
        }

        ul {
            width: 100px;
            /*父元素ul不要设置高让li的个数把盒子撑开*/
            /*height: 100%;*/
        }

        li {
            border: 1px solid blue;
            list-style: none;
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="father">
        <ul>
            <li>上</li>
            <li>下</li>
            <li>托</li>
            <li>动</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
        </ul>
    </div>
</body>
<script> 
    // 页面加载完毕事件 
    window.onload = function () {
        var ele = document.querySelector(".father");
        left_scroll(ele);
    }
    function left_scroll(ele) {
        // 获取移动的ul 
        var moveNode = document.querySelector("ul");
        // ul父盒子的高度
        var moveNodeParentHeight = ele.offsetHeight;
        // ul的高度
        var moveNodeHeight = moveNode.offsetHeight;
        // 计算移动的范围 因为往上移动个是 y负方向 所以这里是减去 而不是加 
        var minDistance = moveNodeParentHeight - moveNodeHeight;
        var maxDistance = 0;
        // 定义变量 用来 标示 吸附的 距离 
        var delayDistance = 150; // console.log('最小值'+minDistance+'------'+'最大值'+maxDistance); 
        // 2.通过touch事件 修改 ul的移动 定义一些变量 记录 距离 
        //起始值 
        var startY = 0;
        // 移动值 
        var moveY = 0;
        // 总的移动距离 
        var distanceY = 0
        //将 重复的代码 进行封装
        var startTransition = function () {
            moveNode.style.transition = 'all .5s';
        }
        var endTransition = function () {
            moveNode.style.transition = '';
        }
        var setTransform = function (distance) {
            moveNode.style.transform = 'translateY(' + distance + 'px)';
        }
        moveNode.addEventListener('touchstart', function (event) {
            startY = event.touches[0].clientY;
        })
        moveNode.addEventListener('touchmove', function (event) {
            moveY = event.touches[0].clientY - startY;
            // 判断 是否满足 移动的条件 
            if ((moveY + distanceY) > (maxDistance + delayDistance)) {
                // 修正moveY
                moveY = 0;
                distanceY = maxDistance + delayDistance;
                // 为什么是减法 因为 往上移动 是负值 要比最小值 还要更小 
            } else if ((moveY + distanceY) < (minDistance - delayDistance)) {
                // 修改 moveY
                moveY = 0; distanceY = minDistance - delayDistance;
            }
            console.log(distanceY); // 关闭 过渡效果 // 
            moveNode.style.transition = ''; endTransition();
            // 移动 
            moveNode.style.transform = 'translateY(' + (moveY + distanceY) + 'px)';
            setTransform(moveY + distanceY);
        })
        moveNode.addEventListener('touchend', function (event) {
            // 修改移动的总距离 
            distanceY += moveY;
            // 吸附回去 判断 吸附的方位 
            if (distanceY > maxDistance) {
                distanceY = maxDistance;
            } else if (distanceY < minDistance) {
                distanceY = minDistance;
            }
            // 吸附回去
            // 移动 // 
            moveNode.style.transition = 'all .5s'; startTransition();
            moveNode.style.transform = 'translateY(' + (distanceY) + 'px)';
            setTransform(distanceY);
        })
    } 
</script>

</html>

约德尔蒙

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js拖拽与吸附(touch+translate+css3)

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, init
复制链接

扫一扫