When the mobile end drags the element, the element is misplaced and offset.

is originally a small example of dragging a picture, but it is found that the picture will misplace and shift at the moment when the finger touches and starts to move, but it can still be dragged later.

html Code:

<body>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541232625&di=e713ce2bf4b01d5484e31810ed0c97c0&imgtype=jpg&er=1&src=http%3A%2F%2Ftx.haiqq.com%2Fuploads%2Fallimg%2F150327%2F211551I17-12.jpg" style="width:100px;" class="small-pic">
    <div class="mask">
        <img src="" alt="" class="big-pic" style="max-width: 100%;">
    </div>
</body>

css part

.mask{
    position: fixed;
    width:100vw;
    height:100vh;
    background-color:rgba(0,0,0,.8);
    top: 0;
    left: 0;
    display: none;
}
.big-pic{
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50%,-50%);
}

js part

<script type="text/javascript">
    function dropImg(obj){
        $(obj).on("touchstart",function(event){
            var disx=event.originalEvent.changedTouches[0].clientX-$(obj).offset().left;
            var disy=event.originalEvent.changedTouches[0].clientY-$(obj).offset().top;
            var moveFlag=true;
            $(document).on("touchmove",function(event){
                event.preventDefault();
                if(moveFlag){
                    $(obj).css({
                        "left":event.originalEvent.changedTouches[0].clientX - disx,
                        "top":event.originalEvent.changedTouches[0].clientY - disy
                    });
                }
            });
            $(document).on("touchend",function(){
                moveFlag=false;
            })
        });
    }
    $(document).ready(function() {
        $(".small-pic").on("touchstart",function(){
            var tag=$(this).attr("src");
            $(".big-pic").attr("src",tag);
            $(".mask").show();
            var oImg=$(".big-pic")
            dropImg(oImg);
        })
    });
</script>
Sep.22,2021

 $(obj).css({
                        "left":event.originalEvent.changedTouches[0].clientX - disx,
                        "top":event.originalEvent.changedTouches[0].clientY - disy
                    });

after setting up here, transform:translate (- 50% camera 50%); attribute deviates the picture

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7c39bb-982d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7c39bb-982d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?