javascript实现移动端触屏拖拽功能,拖拽移动

最新推荐文章于 2024-07-08 10:19:38 发布

前端开发爱好者——

最新推荐文章于 2024-07-08 10:19:38 发布

阅读量2.5k

点赞数 2

文章标签：移动端拖拽移动

本文链接：https://blog.csdn.net/qq_39398332/article/details/81304503

版权

HTML:

 <body>
     <div id="div1">
     </div>
</body>

CSS:

<style media="screen">
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            width: 100%;
            height:100%;
        }
        #div1 {
            width: 50px;
            height: 50px;
            background: cyan;
            position: absolute;
        }
    </style>

JS:

<script type="text/javascript">
          var div1=document.querySelector('#div1');
          var maxW=document.body.clientWidth-div1.offsetWidth;
          var maxH=document.body.clientHeight-div1.offsetHeight;

    div1.addEventListener('touchstart',function(e){
        var ev = e || window.event;
        var touch = ev.targetTouches[0];
        oL = touch.clientX - div1.offsetLeft;
        oT = touch.clientY - div1.offsetTop;
        document.addEventListener("touchmove",defaultEvent,false);
    })


    div1.addEventListener('touchmove',function(e){
        var ev = e || window.event;
       var touch = ev.targetTouches[0];
       var oLeft = touch.clientX - oL;
       var oTop = touch.clientY - oT;
       if(oLeft<0){
           oLeft=0;
       }else if (oLeft>=maxW) {
           oLeft=maxW;
       }
       if(oTop<0){
           oTop=0;
       }else if (oTop>=maxH) {
           oTop=maxH;
       }

       div1.style.left = oLeft + 'px';
       div1.style.top = oTop + 'px';

    })
    div1.addEventListener('touchend',function(){ 
       document.removeEventListener("touchmove",defaultEvent);
    })
    function defaultEvent(e) {


       e.preventDefault();
     }
</script>

说明 :

maxW:div1可移动的最大宽度
maxH:div1可移动的最大高度
oL、oT:鼠标所点位置的坐标

效果: