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

缺乏、安全感 2022-06-13 09:22 167阅读 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>