Moving End Elements Follow Move - Anti-Apple Suspension Sphere Effect (Reload)

Thanks to the original author for sharing. After all, I have been tossing around for a day or had a lot of problems. I feel stuck mainly in the issue of getting and compatibility of the event objects. The first code is my own, no problem without scrollbars on the page, and bugs appear when there are scrollbars.

    //The purpose of this function is to perform element movement on a long time basis. My initial logic was to move a floating ball on a long time basis and click with a popup box
    $.fn.longPress = function(fn) {
        var timeout = undefined;
        var $this = this;
        for(var i = 0;i<$this.length;i++){
            $this[i].addEventListener('touchstart', function(event) {
                timeout = setTimeout(fn, 800);  //Long press over 800ms executes the incoming method
                }, false);
            $this[i].addEventListener('touchend', function(event) {
                clearTimeout(timeout);  //Long press time less than 800ms, incoming method will not be executed
                }, false);
        }
    }

    $("#moreDialog").longPress(function(){
      console.log("Long press on screen");
      var deviceWidth = document.documentElement.clientWidth;
      var deviceHeight = document.documentElement.clientHeight;
      $("body").css({"overflow":"hidden"})
      var drag = document.getElementById('moreDialog2'),
      drag.addEventListener('touchmove', function(ev){                    
      console.log(ev)      
      var ev = ev || window.event;//There's a problem here.
      var _touch = ev.targetTouches[0];
      var _x= _touch.pageX - 35;
        var _y= _touch.pageY - 35;
        console.log(_x,_y)
         if(_x <= 0){
            _x = 0;
        }
        if(_x >= (deviceWidth-70)){
            _x = deviceWidth-70
        }
        if(_y <= 0){
            _y = 0;
        }
        if(_y >= (deviceHeight-70)){
            _y = deviceHeight-70
        } 
        $("#moreDialog").css({
            "left":_x + "px",
            "top":_y + "px"
        })
           /* drag.style.top=(ev.pageY-35)+'px';
           drag.style.left=(ev.pageX-35)+'px';
           endTouchX = ev.pageX; */
       },false)
        drag.addEventListener('touchend', function(ev){
        var deviceWidth = document.documentElement.clientWidth;
        var deviceHeight = document.documentElement.clientHeight;   
            //window.event? window.event.cancelBubble = true : ev.stopPropagation();

            $("body").css({"overflow":"auto"})
        },false)

});

**

After half a day's tossing and turning, the result was not good. It should be said that it was a failure. Fortunately, the code shared below was found to solve the urgent problem. You can learn from it:

**

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!--Set up viewport-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <title>Moving end element movement mimics floating ball effect</title>
</head>
<style>
    body,html{
        margin: 0;
        padding: 0;
    }
    ol{
        margin: 0;
    }
    .div {
        width: 80px;
        height: 80px;
        position: fixed;
        z-index: 2;
        left: 78vw;
        top:20vh;
        background-color: rgb(129, 185, 231);
        border-radius: 50%;
    }
    li{
        line-height:30px;
    }
    #son{
        width:40px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -20px;
        margin-left: -20px;
        background: #fff;
        opacity: 0.72;
        border-radius: 50%;
    }
</style>

<body>
    <div style="background:#c7e2bf;">
        <ol>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
            <li>Make a little progress every day</li>
        </ol>
    </div>
    <div class="div" id="div">
        <div id="son"></div>
    </div>
</body>
<script>
    window.onload = function () {
        var flag = 0; //Whether the marker is dragged or clicked
        var oDiv = document.getElementById("div");
        var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;
        oDiv.addEventListener("touchstart", function (e) {
            flag = 0;
            console.log("touchstart",e)
            e.preventDefault(); //Prevent page scrolling, zooming when touched
            disX = e.touches[0].clientX - this.offsetLeft;
            disY = e.touches[0].clientY - this.offsetTop;
            //Coordinates when finger is pressed
            starX = e.touches[0].clientX;
            starY = e.touches[0].clientY;
            //console.log(disX);
        });
        oDiv.addEventListener("touchmove", function (e) {
            flag = 1;
            console.log("touchmove",e)
            L = e.touches[0].clientX - disX;
            T = e.touches[0].clientY - disY;
            //The difference between the current position and the starting position when moving
            starXEnd = e.touches[0].clientX - starX;
            starYEnd = e.touches[0].clientY - starY;
            //console.log(L);
            if (L < 0) { //Limit the X-range you drag and cannot drag out the screen
                L = 0;
            } else if (L > document.documentElement.clientWidth - this.offsetWidth) {
                L = document.documentElement.clientWidth - this.offsetWidth;
            }
            if (T < 0) { //Limit the Y-range of dragging and cannot drag out the screen
                T = 0;
            } else if (T > document.documentElement.clientHeight - this.offsetHeight) {
                T = document.documentElement.clientHeight - this.offsetHeight;
            }
            moveX = L + "px";
            moveY = T + "px";
            //console.log(moveX);
            this.style.left = moveX;
            this.style.top = moveY;
        });
        oDiv.addEventListener("touchend", function (e) {
            //alert(parseInt(moveX))
            //Judging Slide Direction
            console.log("touchend",e)
            if (flag === 0) { //click
                console.log("click")
                //window.location.href = "http://www.baidu.com";
            }
        });


    }
</script>

</html> 

Upload to Code puzzle ; because individual business needs are different and need to be changed by myself, I need to move and click two functions, introducing the event module of jQuery mobile,

    $("#moreDialog2").on("tap", function (e) {
       console.log("Clicked")
       e.preventDefault();
       //Here is the click-through business logic
   });

Tags: less JQuery Mobile

Posted on Mon, 25 May 2020 09:59:41 -0700 by Lirpa