HTML 拖放 API：DataTransfer、文件投放与触屏替代方案

<ul id="tasks">
<li draggable="true" data-task-id="task-42">
  <button type="button" data-action="move-up">上移</button>
  <span>准备发布</span>
</li>
</ul>
<div id="drop-target">移动到此处</div>

const list = document.querySelector('#tasks');
const target = document.querySelector('#drop-target');

list.addEventListener('dragstart', (event) => {
  const item = event.target.closest('[data-task-id]');
  if (!item || !event.dataTransfer) return;
  event.dataTransfer.effectAllowed = 'move';
  event.dataTransfer.setData('text/plain', item.dataset.taskId);
});

target.addEventListener('dragover', (event) => {
  event.preventDefault();
  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
});

target.addEventListener('drop', async (event) => {
  event.preventDefault();
  const id = event.dataTransfer?.getData('text/plain');
  if (id) await moveTask(id);
});

const zone = document.querySelector('#upload-zone');

zone.addEventListener('dragover', (event) => {
  event.preventDefault();
  zone.classList.add('is-dragging');
});

zone.addEventListener('dragleave', () => {
  zone.classList.remove('is-dragging');
});

zone.addEventListener('drop', (event) => {
  event.preventDefault();
  zone.classList.remove('is-dragging');
  const files = [...(event.dataTransfer?.files || [])];
  if (files.length) validateAndUpload(files);
});

.drop-zone {
  min-height: 5rem;
  border: 2px dashed #778899;
}

.drop-zone.is-dragging,
.drop-zone:focus-visible {
  border-style: solid;
  outline: 3px solid #167d72;
  outline-offset: 2px;
}