H5移动端Javascript拖拽效果案例

日期：2020-06-25 栏目：前端经验浏览：次
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>移动端可拖拽效果</title>
<style>
.ball {
	position: fixed;
    line-height: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: .5rem;
    text-align: center;
    border-radius: 99px;
    color: #fff;
    /*border: 1rem solid transparent;*/
    background-color: #00bc12;
    background-clip: padding-box;
    text-decoration: none;
    top: 13em;
}
</style>
</head>
<body>
<div style="height: 2000px;">拖拽效果测试，PC浏览器访问，需打开控制台进入移动模式。</div>
<a href="https://blog.csdn.net/qq_38881495" id="ball" class="ball">拖我</a>
<script>
    /**
 * @Inertia.js
 * @author zhangxinxu
 * @version
 * @Created: 18-11-07
 * @description 拖动元素，并且具有惯性和边缘反弹效果
 */

(function (global, factory) {
    if (typeof define === 'function' && (define.amd || define.cmd)) {
        define(factory);
    } else {
        global.Inertia = factory();
    }
}(this, function () {
    'use strict';

    var Inertia = function (ele, options) {
        var defaults = {
            // 是否吸附边缘
            edge: true
        };

        var params = {};
        options = options || {};
        for (var key in defaults) {
            if (typeof options[key] !== 'undefined') {
                params[key] = options[key];
            } else {
                params[key] = defaults[key];
            }
        }

        var data = {
            distanceX: 0,
            distanceY: 0
        };

        var win = window;

        // 浏览器窗体尺寸
        var winWidth = win.innerWidth;
        var winHeight = win.innerHeight;

        if (!ele) {
            return;
        }

        // 设置transform坐标等方法
        var fnTranslate = function (x, y) {
            x = Math.round(1000 * x) / 1000;
            y = Math.round(1000 * y) / 1000;

            ele.style.webkitTransform = 'translate(' + [x + 'px', y + 'px'].join(',') + ')';
            ele.style.transform = 'translate3d(' + [x + 'px', y + 'px', 0].join(',') + ')';
        };

        var strStoreDistance = '';
        // 居然有android机子不支持localStorage
        if (ele.id && win.localStorage && (strStoreDistance = localStorage['Inertia_' + ele.id])) {
            var arrStoreDistance = strStoreDistance.split(',');
            ele.distanceX = +arrStoreDistance[0];
            ele.distanceY = +arrStoreDistance[1];
            fnTranslate(ele.distanceX, ele.distanceY);
        }

        // 显示拖拽元素
        ele.style.visibility = 'visible';

        // 如果元素在屏幕之外，位置使用初始值
        var initBound = ele.getBoundingClientRect();

        if (initBound.left < -0.5 * initBound.width ||
            initBound.top < -0.5 * initBound.height ||
            initBound.right > winWidth + 0.5 * initBound.width ||
            initBound.bottom > winHeight + 0.5 * initBound.height
            ) {
            ele.distanceX = 0;
            ele.distanceY = 0;
            fnTranslate(0, 0);
        }

        ele.addEventListener('touchstart', function (event) {
            // if (data.inertiaing) {
             //   return;
            // }

            var events = event.touches[0] || event;

            data.posX = events.pageX;
            data.posY = events.pageY;

            data.touching = true;

            if (ele.distanceX) {
                data.distanceX = ele.distanceX;
            }
            if (ele.distanceY) {
                data.distanceY = ele.distanceY;
            }

            // 元素的位置数据
            data.bound = ele.getBoundingClientRect();

            data.timerready = true;
        });

        // easeOutBounce算法
        /*
        * t: current time（当前时间）；
         * b: beginning value（初始值）；
         * c: change in value（变化量）；
         * d: duration（持续时间）。
        **/
        var easeOutBounce = function (t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
            }
        };

        document.addEventListener('touchmove', function (event) {
            if (data.touching !== true) {
                return;
            }

            // 当移动开始的时候开始记录时间
            if (data.timerready == true) {
                data.timerstart = +new Date();
                data.timerready = false;
            }

            event.preventDefault();

            var events = event.touches[0] || event;

            data.nowX = events.pageX;
            data.nowY = events.pageY;

            var distanceX = data.nowX - data.posX,
                distanceY = data.nowY - data.posY;

            // 此时元素的位置
            var absLeft = data.bound.left + distanceX,
                absTop = data.bound.top + distanceY,
                absRight = absLeft + data.bound.width,
                absBottom = absTop + data.bound.height;

            // 边缘检测
            if (absLeft < 0) {
                distanceX = distanceX - absLeft;
            }
            if (absTop < 0) {
                distanceY = distanceY - absTop;
            }
            if (absRight > winWidth) {
                distanceX = distanceX - (absRight - winWidth);
            }
            if (absBottom > winHeight) {
                distanceY = distanceY - (absBottom - winHeight);
            }

            // 元素位置跟随
            var x = data.distanceX + distanceX, y = data.distanceY + distanceY;
            fnTranslate(x, y);

            // 缓存移动位置
            ele.distanceX = x;
            ele.distanceY = y;
        }, { // fix #3 #5
            passive: false
        });

        document.addEventListener('touchend', function () {
            if (data.touching === false) {
                // fix iOS fixed bug
                return;
            }
            data.touching = false;

            // 计算速度
            data.timerend = +new Date();

            if (!data.nowX || !data.nowY) {
                return;
            }

            // 移动的水平和垂直距离
            var distanceX = data.nowX - data.posX,
                distanceY = data.nowY - data.posY;

            if (Math.abs(distanceX) < 5 && Math.abs(distanceY) < 5) {
                return;
            }

            // 距离和时间
            var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY), time = data.timerend - data.timerstart;

            // 速度，每一个自然刷新此时移动的距离
            var speed = distance / time * 16.666;

            // 经测试，2~60多px不等
            // 设置衰减速率
            // 数值越小，衰减越快
            var rate = Math.min(10, speed);

            // 开始惯性缓动
            data.inertiaing = true;

            // 反弹的参数
            var reverseX = 1, reverseY = 1;

            // 速度计算法
            var step = function () {
                if (data.touching == true) {
                    data.inertiaing = false;
                    return;
                }
                speed = speed - speed / rate;

                // 根据运动角度，分配给x, y方向
                var moveX = reverseX * speed * distanceX / distance, moveY = reverseY * speed * distanceY / distance;

                // 此时元素的各个数值
                var bound = ele.getBoundingClientRect();

                if (moveX < 0 && bound.left + moveX < 0) {
                    moveX = 0 - bound.left;
                    // 碰触边缘方向反转
                    reverseX = reverseX * -1;
                } else if (moveX > 0 && bound.right + moveX > winWidth) {
                    moveX = winWidth - bound.right;
                    reverseX = reverseX * -1;
                }

                if (moveY < 0 && bound.top + moveY < 0) {
                    moveY = -1 * bound.top;
                    reverseY = -1 * reverseY;
                } else if (moveY > 0 && bound.bottom + moveY > winHeight) {
                    moveY = winHeight - bound.bottom;
                    reverseY = -1 * reverseY;
                }

                var x = ele.distanceX + moveX, y = ele.distanceY + moveY;
                // 位置变化
                fnTranslate(x, y);

                ele.distanceX = x;
                ele.distanceY = y;

                if (speed < 0.1) {
                    speed = 0;
                    if (params.edge == false) {
                        data.inertiaing = false;

                        if (win.localStorage) {
                            localStorage['Inertia_' + ele.id] = [x, y].join();
                        }
                    } else {
                        // 边缘吸附
                        edge();
                    }
                } else {
                    requestAnimationFrame(step);
                }
            };

            var edge = function () {
                // 时间
                var start = 0, during = 25;
                // 初始值和变化量
                var init = ele.distanceX, y = ele.distanceY, change = 0;
                // 判断元素现在在哪个半区
                var bound = ele.getBoundingClientRect();
                if (bound.left + bound.width / 2 < winWidth / 2) {
                    change = -1 * bound.left;
                } else {
                    change = winWidth - bound.right;
                }

                var run = function () {
                    // 如果用户触摸元素，停止继续动画
                    if (data.touching == true) {
                        data.inertiaing = false;
                        return;
                    }

                    start++;
                    var x = easeOutBounce(start, init, change, during);
                    fnTranslate(x, y);

                    if (start < during) {
                        requestAnimationFrame(run);
                    } else {
                        ele.distanceX = x;
                        ele.distanceY = y;

                        data.inertiaing = false;
                        if (win.localStorage) {
                           localStorage['Inertia_' + ele.id] = [x, y].join();
                       }
                    }
                };
                run();
            };

            step();
        });
    };

    return Inertia;
}));
</script>
<script>
new Inertia(document.getElementById('ball'));
</script>
</body>
</html>
转载注明出处：http://www.duanlonglong.com/qdjy/248.html
H5移动端Javascript拖拽效果案例

相关推荐
