h5--可在规定范围内拖动元素

// 元素移动
            let icon_right_lottry = document.querySelector("拖动对象"),lottry_l,lottry_t,lottry_x,lottry_y,touchstartTime = 0,touchstartInterval;
            icon_right_lottry.addEventListener("touchstart",function(e){
              e.preventDefault();
              lottry_l = $("拖动对象").css("left").split("px")[0];
              lottry_t = $("拖动对象").css("top").split("px")[0];
              lottry_x = e.touches[0].pageX;
              lottry_y = e.touches[0].pageY;
              touchstartInterval = setInterval(() => {
                touchstartTime++;
              }, 100);
            });
            icon_right_lottry.addEventListener("touchmove", function (event){
              event.preventDefault();
              let endx = event.touches[0].pageX - lottry_x + lottry_l * 1;
              let endy = event.touches[0].pageY - lottry_y + lottry_t * 1;
              //活动区域的最小值
              if(endy < 37){
                endy = 37;
              }
              //活动区域的最大值
              if(endy > 200){
                endy = 200;
              }
              $("拖动对象").css({
                  "left":`${endx}px`,
                  "top":`${endy}px`
              });
            });
            icon_right_lottry.addEventListener("touchend", function (e){
              e.preventDefault();
              clearInterval(touchstartInterval);
              if(touchstartTime < 3){
                  识别单纯点击的情况处理
              }
              touchstartTime = 0;
            });

你可能感兴趣的:(h5--可在规定范围内拖动元素)