jquery触屏拖动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Touch Drag</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="draggable"></div>

    <script>
        $(document).ready(function() {
            var startX, startY, initialMouseX, initialMouseY;

            $('#draggable').on('touchstart', function(event) {
                event.preventDefault();
                var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
                startX = $(this).offset().left;
                startY = $(this).offset().top;
                initialMouseX = touch.pageX;
                initialMouseY = touch.pageY;
            });

            $(document).on('touchmove', function(event) {
                event.preventDefault();
                var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
                var dx = touch.pageX - initialMouseX;
                var dy = touch.pageY - initialMouseY;
                $('#draggable').css({
                    left: startX + dx + 'px',
                    top: startY + dy + 'px'
                });
            });
        });
    </script>
</body>
</html>