javascript的draganddropapi如何实现_如何让元素可拖放并处理放置目标【教程】-js教程-PHP中文网

JavaScript Drag and Drop API需设draggable="true"并监听dragstart/drop事件，且dragover中必须preventDefault()否则drop不触发；移动端完全不支持该API。

javascript的draganddropapi如何实现_如何让元素可拖放并处理放置目标【教程】

JavaScript 的 Drag and Drop API 默认不启用拖放，必须手动设置 draggable="true" 并监听至少 dragstart 和 drop 事件才能生效；漏掉 preventDefault() 在 dragover 中会导致 drop 事件完全不触发。

让元素可拖放：不只是加 draggable="true"

仅在 HTML 元素上写 draggable="true" 只是开启“能被鼠标抓起”的能力，但拖拽过程中没有数据、没有视觉反馈、松手后也什么都不会发生。

dragstart 事件里必须用 event.dataTransfer.setData(format, data) 写入拖拽内容（如 "text/plain" 或自定义类型），否则目标区域无法读取
若想拖动时显示自定义图片（比如半透明缩略图），需调用 event.dataTransfer.setDragImage(element, x, y)，且 element 不能是隐藏或未挂载节点
不处理 dragstart 时的默认行为（例如会触发浏览器原生下载），可能干扰逻辑 —— 必要时调用 event.preventDefault()

放置目标必须响应 dragover，否则 drop 不会触发

这是最常踩的坑：drop 事件永远不会到达目标元素，除非它在 dragover 阶段明确告诉浏览器“我接受投放”。浏览器默认阻止所有 drop，靠 dragover 中的 preventDefault() 解锁。

只监听 drop 是无效的，必须同时监听 dragover 并在其中调用 event.preventDefault()
可以顺便在 dragover 里加 class 切换视觉反馈（如 target.classList.add("drag-over")），但记得在 dragleave 清除
如果目标区域是空容器（比如），高度为 0，则无法触发 dragover —— 需设最小高度或 padding

在 drop 事件中读取拖拽数据并完成操作

drop 触发后，从 event.dataTransfer 读取数据即可。注意：只能读取 dragstart 时用相同 format 写入的内容。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

target.addEventListener("drop", (event) => {
  event.preventDefault(); // 依然需要
  const data = event.dataTransfer.getData("text/plain");
  if (data) {
    target.textContent = data;
  }
});

getData("text/plain") 返回字符串，getData("text/uri-list") 可读取拖入的文件路径（仅限某些浏览器支持）
拖文件进页面要用 event.dataTransfer.files（FileList 对象），和文本拖拽走的是不同路径，不能混用 getData
若需区分多个拖拽源（如不同颜色卡片），可在 dragstart 中写入 JSON 字符串：setData("application/json", JSON.stringify({id: 123, type: "card"}))