移动端多个DIV简单拖拽功能

最新推荐文章于 2023-01-12 11:04:50 发布

weixin_30596023

最新推荐文章于 2023-01-12 11:04:50 发布

阅读量201

点赞数

原文链接：http://www.cnblogs.com/SophiaLees/p/9547742.html

版权

　　移动端多个DIV简单拖拽功能。

　　这个demo与之前写的一个例子差不了多少，只是这个多了一层遍历而已。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端多个DIV拖拽</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            height: calc(100vh);
            overflow: hidden;
        }
        .container ul {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .container li {
            list-style: none;
            width: 180px;
            height: 180px;
            background: #f00;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>

<div class="container">
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<script>
    window.onload = function(){

        var list = document.querySelector('#list');
        var lis = list.getElementsByTagName('li');
        var startX = 0, startY = 0;

        for(let i=0; i<lis.length; i++){
            var posL = i * 200;
            lis[i].style.left = posL + 'px';
        }

        for(let i=0; i<lis.length; i++){
            var that = this;
            lis[i].addEventListener('touchstart', function(e){
                console.log(e);
                startX = e.targetTouches[0].pageX - this.offsetLeft;
                startY = e.targetTouches[0].pageY - this.offsetTop;
            });

            lis[i].addEventListener('touchmove', function(e){
                console.log(e);
                var leftX = e.targetTouches[0].pageX - startX;
                var topY = e.targetTouches[0].pageY - startY;
                var parentW = e.targetTouches[0].target.offsetParent.clientWidth;
                var parentH = e.targetTouches[0].target.offsetParent.clientHeight;
                var thisW = e.targetTouches[0].target.clientWidth;
                var thisH = e.targetTouches[0].target.clientHeight;
                var l = parentW - thisW;
                var t = parentH - thisH;

                if(leftX <= 0){
                    leftX = 0;
                }

                if(leftX >= l){
                    leftX = l;
                }

                if(topY <= 0){
                    topY = 0;
                }

                if(topY >= t){
                    topY = t;
                }

                this.style.left = leftX + 'px';
                this.style.top = topY + 'px';
            });
        }
    };
</script>

</body>
</html>

转载于:https://www.cnblogs.com/SophiaLees/p/9547742.html

weixin_30596023

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端多个DIV简单拖拽功能

　　移动端多个DIV简单拖拽功能。　　这个demo与之前写的一个例子差不了多少，只是这个多了一层遍历而已。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>移动端多个DIV拖拽</title> ...
复制链接

扫一扫