js移动端拖拽

let startX, startY, initialLeft, initialTop;

const draggableElement = document.getElementById('draggable');

draggableElement.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
  
  // 获取元素当前位置
  const rect = draggableElement.getBoundingClientRect();
  initialLeft = rect.left;
  initialTop = rect.top;
  
  // 防止页面滚动
  e.preventDefault();
}, false);

draggableElement.addEventListener('touchmove', (e) => {
  const touch = e.touches[0];
  const deltaX = touch.clientX - startX;
  const deltaY = touch.clientY - startY;
  
  // 更新元素位置
  draggableElement.style.left = initialLeft + deltaX + 'px';
  draggableElement.style.top = initialTop + deltaY + 'px';
  
  e.preventDefault();
}, false);

draggableElement.addEventListener('touchend', (e) => {
  // 处理拖拽结束逻辑（如判断放置区域等）
}, false);