手机端js拖拽

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop</title>
<style>
  #draggable {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 50px;
  }
</style>
</head>
<body>
<div id="draggable"></div>

<script>
  const draggable = document.getElementById('draggable');
  let startX, startY, initialX, initialY;

  draggable.addEventListener('touchstart', (event) => {
    event.preventDefault();
    const touch = event.touches[0];
    startX = touch.clientX;
    startY = touch.clientY;
    initialX = draggable.offsetLeft;
    initialY = draggable.offsetTop;
  });

  draggable.addEventListener('touchmove', (event) => {
    event.preventDefault();
    const touch = event.touches[0];
    const deltaX = touch.clientX - startX;
    const deltaY = touch.clientY - startY;
    draggable.style.left = `${initialX + deltaX}px`;
    draggable.style.top = `${initialY + deltaY}px`;
  });

  draggable.addEventListener('touchend', (event) => {
    event.preventDefault();
  });
</script>
</body>
</html>