移动化拖拽元素移动

最新推荐文章于 2024-02-26 19:57:40 发布

这个杀手好冷

最新推荐文章于 2024-02-26 19:57:40 发布

阅读量146

点赞数

分类专栏： javascript 文章标签： servlet

本文链接：https://blog.csdn.net/qq_43649479/article/details/126259781

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!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>Document</title>

    <style>

        body{

            margin: 0;

        }

        #touchMove {

            position: relative;

            width: 100px;

            border: 1px solid red;

        }

    </style>

</head>



<body>

    <div id="touchMove" class="">开始体验</div>



    <script>

        window.onload = function () {



            var oDiv = document.getElementById('touchMove');

            var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;

            oDiv.addEventListener('touchstart', function (e) {

                e.preventDefault();//阻止触摸时页面的滚动，缩放

                oDiv.style.transition = 'none'

                disX = e.touches[0].clientX - this.offsetLeft;

                disY = e.touches[0].clientY - this.offsetTop;

                //手指按下时的坐标

                starX = e.touches[0].clientX;

                starY = e.touches[0].clientY;

                //console.log(disX);

            });



            oDiv.addEventListener('touchmove', function (e) {

                L = e.touches[0].clientX - disX;

                T = e.touches[0].clientY - disY;

                //移动时 当前位置与起始位置之间的差值

                starXEnd = e.touches[0].clientX - starX;

                starYEnd = e.touches[0].clientY - starY;

                console.log( e.touches[0].clientX , disX);

                if (L < 0) {//限制拖拽的X范围，不能拖出屏幕

                    L = 0;

                }else if (L > document.documentElement.clientWidth - this.offsetWidth) {

                    L = document.documentElement.clientWidth - this.offsetWidth;

                }

                if (T < 0) {//限制拖拽的Y范围，不能拖出屏幕

                    T = 0;

                }else if (T > document.documentElement.clientHeight - this.offsetHeight) {

                    T = document.documentElement.clientHeight - this.offsetHeight;

                }

                moveX = L + 'px';

                moveY = T + 'px';

                this.style.left = moveX;

                this.style.top = moveY;

                console.log(moveX);

            });



            window.addEventListener('touchend', function (e) {

                //alert(parseInt(moveX))

                //判断滑动方向

                //判断滑动方向

                oDiv.style.transition = 'all 0.3s'

                if (L > document.documentElement.clientWidth / 2) {

                    oDiv.style.left = document.documentElement.clientWidth - oDiv.offsetWidth  + 'px'

                } else {

                    oDiv.style.left = 0

                }

            });



        }

    </script>

</body>



</html>