移动端拖拽

最新推荐文章于 2024-03-12 16:36:04 发布

qq_39963082

最新推荐文章于 2024-03-12 16:36:04 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

文章标签：拖拽指定div区域内拖拽拖拽div 拖拽图片

本文链接：https://blog.youkuaiyun.com/qq_39963082/article/details/82911108

本文详细介绍了如何使用JavaScript实现移动端的拖拽功能，包括触屏事件的监听与处理，以及如何进行边界判断防止元素移出指定区域。通过具体代码示例，展示了从touchstart到touchend的全过程，为移动端应用提供流畅的用户交互体验。

移动端拖拽

<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>