移动端拖拽_dragstart 手机端-CSDN博客

本文链接：https://blog.csdn.net/qq_39963082/article/details/82911108

<script type="text/javascript">
    var isdrag = true;
    var tempX, x, tempY, y;

    function dragStart(e) {
        isdrag = true;
        tempX = parseInt($("#testDrag").css("left") + 0);
        tempY = parseInt($("#testDrag").css("top") + 0);
        x = e.touches[0].pageX;
        y = e.touches[0].pageY;
    }

    function dragMove(e) {
        if (isdrag) {
            var curX = tempX + e.touches[0].pageX - x;
            var curY = tempY + e.touches[0].pageY - y;
            //边界判断
            curX = curX < $(".drag_box").offset().left? $(".drag_box").offset().left : curX;
            curY = curY < $(".drag_box").offset().top ? $(".drag_box").offset().top : curY;
            curX = curX <$(".drag_box").innerWidth()+$(".drag_box").offset().left -$(".test_drag").outerWidth()+1? curX : $(".drag_box").innerWidth()+$(".drag_box").offset().left - $(".test_drag").outerWidth()+1;
            curY = curY < $(".drag_box").innerHeight()+$(".drag_box").offset().top- $(".test_drag").outerHeight()+1? curY : $(".drag_box").innerHeight()+$(".drag_box").offset().top - $(".test_drag").outerHeight()+1;
            $("#testDrag").css({
                "left": curX,
                "top": curY
            });
            //禁止浏览器默认事件
            e.preventDefault();
        }
    }

    function dragEnd() {
        isdrag = false;
    }

    $(function() {
        document.getElementById("testDrag").addEventListener("touchstart", dragStart);
        document.getElementById("testDrag").addEventListener("touchmove", dragMove);
        document.getElementById("testDrag").addEventListener("touchend", dragEnd);
    });
</script>