div在一个父容器中进行移动

    xiaoxiao2021-03-26  3

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">    <meta name="msapplication-tap-highlight" content="no">    <meta name="format-detection" content="telephone=no"> <title>移动div</title> <script src="js/jquery-1.10.2.min.js"></script> </head> <body> <div id="testDiv" style="border: #51B21C 1px solid; z-index: 1000; width: 120px; height: 60px; position: absolute; left: 0px; top:100px"></div> </body> <script type="text/javascript">      var x_start,y_start,x_move,y_move,x_end,y_end,page_x,page_y;      //点击的时候      document.getElementById("testDiv").addEventListener('touchstart',function(e){       //获取手指的位置       x_start=e.touches[0].pageX;       y_start=e.touches[0].pageY;       //获取当前div在页面上的位置       page_x=$("#testDiv").css("left");       page_y=$("#testDiv").css("top");      });            //点击离开的时候      document.getElementById("testDiv").addEventListener('touchmove',function(e){       x_move=e.touches[0].pageX;       y_move=e.touches[0].pageY;       //设置left和top       var x=parseFloat(x_move)-parseFloat(x_start)+parseFloat(page_x);       if(x>=0){       var winW=$(window).width();       var width=$("#testDiv").width();       if(x>=(winW-width)){         x=winW-width;       }       $("#testDiv").css("left",x+"px");       }else{       $("#testDiv").css("left",0+"px");       }       var y=parseFloat(y_move)-parseFloat(y_start)+parseFloat(page_y);       if(y>=0){       var winH=$(window).height();       var height=$("#testDiv").height();       if(y>(winH-height)){       y=winH-height;       }       $("#testDiv").css("top",y+"px")       }else{       $("#testDiv").css("top",0+"px")       }      });            //end      document.getElementById("testDiv").addEventListener('touchend',function(e){            });  document.addEventListener('touchmove', function(e){e.preventDefault()}, false); </script> </html>
    转载请注明原文地址: https://ju.6miu.com/read-500127.html

    最新回复(0)