拖拽与手势实现：Pointer Events、DnD 与触控细节

const handle = document.querySelector<HTMLElement>('.drag-handle')!;
let activePointer: number | null = null;   // 记录正在拖拽的那根指针

handle.addEventListener('pointerdown', (event) => {
  if (activePointer !== null) return;                       // 已有一根指针在拖
  if (event.pointerType === 'mouse' && event.button !== 0) return; // 鼠标只认左键
  activePointer = event.pointerId;
  handle.setPointerCapture(event.pointerId);
  handle.classList.add('is-dragging');
});

handle.addEventListener('pointerup', (event) => {
  if (event.pointerId !== activePointer) return;
  activePointer = null;
  handle.classList.remove('is-dragging');
});

.drag-handle {
  touch-action: none;        /* 在这个元素上，触摸手势全部让位给自定义逻辑 */
  user-select: none;         /* 拖拽中不要选中文本 */
  cursor: grab;
}
.drag-handle.is-dragging { cursor: grabbing; }

handle.addEventListener('pointerdown', (event) => {
  handle.setPointerCapture(event.pointerId);
  // 捕获是显式的：releasePointerCapture 或指针 up 后自动释放
  const rect = handle.getBoundingClientRect();
  const grabOffset = {
    x: event.clientX - rect.left,   // 记录按下点相对元素的位置
    y: event.clientY - rect.top,
  };
  dragState = { pointerId: event.pointerId, grabOffset };
});

type DragState = { pointerId: number; startX: number; startY: number; baseX: number; baseY: number };

let dragState: DragState | null = null;
let pending: { x: number; y: number } | null = null;
let rafId = 0;

handle.addEventListener('pointerdown', (event) => {
  handle.setPointerCapture(event.pointerId);
  // 基准取"元素当前 transform 之前"的静态位置，只量一次
  const style = getComputedStyle(card);
  const m = new DOMMatrix(style.transform === 'none' ? undefined : style.transform);
  dragState = {
    pointerId: event.pointerId,
    startX: event.clientX, startY: event.clientY,
    baseX: m.m41, baseY: m.m42,          // 已有的 translate 作为基准
  };
});

handle.addEventListener('pointermove', (event) => {
  if (!dragState || event.pointerId !== dragState.pointerId) return;
  pending = { x: event.clientX, y: event.clientY };
  if (!rafId) rafId = requestAnimationFrame(applyTransform);
});

function applyTransform(): void {
  rafId = 0;
  if (!dragState || !pending) return;
  const dx = pending.x - dragState.startX;
  const dy = pending.y - dragState.startY;
  card.style.transform =
    `translate(${dragState.baseX + dx}px, ${dragState.baseY + dy}px)`;
}

card.classList.add('is-dragging');   // 拖拽期间不响应指针，让检测穿透自己

function hitTest(x: number, y: number): HTMLElement | null {
  const under = document.elementFromPoint(x, y);
  return under?.closest<HTMLElement>('[data-dropzone]') ?? null;
}

.card.is-dragging {
  pointer-events: none;   /* 关键：让 elementFromPoint 命中下层的投放区 */
  z-index: 10;
}

const EDGE = 56;          // 距边缘多少像素内开始滚
const SPEED = 12;         // 每帧滚动像素，实际产品应按距离边缘的远近分档

function autoScrollLoop(container: HTMLElement, clientY: number): void {
  const rect = container.getBoundingClientRect();
  let delta = 0;
  if (clientY < rect.top + EDGE) delta = -SPEED * (1 - (clientY - rect.top) / EDGE);
  else if (clientY > rect.bottom - EDGE) delta = SPEED * (1 - (rect.bottom - clientY) / EDGE);
  if (delta) {
    container.scrollTop += delta;
    scheduleHitTest(clientY);       // 容器动了，命中结果要重算
  }
}

handle.addEventListener('pointerdown', (event) => {
  if (activePointer !== null) return;    // 第二根手指直接忽略
  activePointer = event.pointerId;
  // ...
});

handle.addEventListener('pointermove', (event) => {
  if (event.pointerId !== activePointer) return;  // 只处理活动指针
  // ...
});

handle.addEventListener('pointercancel', (event) => {
  if (event.pointerId !== activePointer) return;
  abortDrag();   // 浏览器接管：还原位置、清状态、移除高亮
});

<ul class="sortable" role="list">
  <li class="item" tabindex="0" aria-roledescription="可排序条目">
    <span class="item-label">准备发布</span>
    <button type="button" data-action="up" aria-label="上移">↑</button>
    <button type="button" data-action="down" aria-label="下移">↓</button>
  </li>
</ul>
<p class="sr-live" aria-live="polite" id="sort-live"></p>

const live = document.querySelector('#sort-live')!;

item.addEventListener('keydown', (event) => {
  const items = [...list.querySelectorAll('.item')] as HTMLElement[];
  const index = items.indexOf(item);
  let next = -1;

  switch (event.key) {
    case 'ArrowUp': next = Math.max(0, index - 1); break;
    case 'ArrowDown': next = Math.min(items.length - 1, index + 1); break;
    case 'Home': next = 0; break;
    case 'End': next = items.length - 1; break;
    default: return;
  }
  event.preventDefault();
  if (next === index) return;

  moveItem(index, next);                       // 与拖拽共用同一条数据路径
  item.focus();                                // 焦点跟着条目走
  live.textContent = `已移到第 ${next + 1} 位，共 ${items.length} 项`;
});