JavaScript拖放功能_DragDropAPI-js教程-PHP中文网

JavaScript拖放功能_DragDropAPI

betcha

发布： 2025-11-26 17:47:02

原创

212人浏览过

答案：原生DragDrop API通过draggable属性和事件实现拖拽，需设置dragstart存储数据、dragover阻止默认行为以允许放置、drop处理元素移动，配合dataTransfer传递标识符，注意兼容性与用户体验优化。

javascript拖放功能_dragdropapi

拖放功能在现代网页交互中非常实用，比如文件上传、列表排序、元素移动等场景。JavaScript 的 Drag and Drop API 提供了原生支持，无需依赖第三方库即可实现基本的拖拽操作。

启用拖放的基本步骤

要使用原生 DragDrop API，需要为可拖动元素和目标区域分别设置事件监听。核心是通过 draggable 属性和一系列拖拽事件来控制行为。

1. 设置元素可拖动：

任何 HTML 元素都可以通过设置 draggable="true" 变成可拖动的。

<div id="dragElem" draggable="true">拖动我</div>

立即学习“Java免费学习笔记（深入）”；

2. 监听拖拽相关事件：

主要事件包括：

dragstart：开始拖动时触发，用于设置拖动数据和样式
drag：拖动过程中持续触发
dragend：拖动结束（释放或取消）时触发
dragover：拖动到目标区域上时持续触发，需调用 preventDefault() 才能允许放置
dragenter：进入目标区域时触发
dragleave：离开目标区域时触发
drop：在目标区域释放时触发，处理放置逻辑

实现一个简单拖放示例

以下是一个将一个方块从一处拖到另一处并改变位置的示例：

HTML 结构：

黑色全屏自适应的H5模板

黑色全屏自适应的H5模板 HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：新的解析规则增强了灵活性淘汰过时的或冗余的属性一个HTML5文档到另一个文档间的拖放功能多用途互联网邮件扩展（MIME）和协议处理程序注册在SQL数据库中存

查看详情

<div id="source" style="width:200px;height:200px;border:1px solid #ccc;">
  <div id="dragElem" draggable="true" style="width:50px;height:50px;background:red;"></div>
</div>

<div id="target" style="width:200px;height:200px;border:2px dashed #000;margin-top:20px;">
  放到这里
</div>

登录后复制

JavaScript 逻辑：

const dragElem = document.getElementById('dragElem');
const target = document.getElementById('target');

// 开始拖动
dragElem.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', dragElem.id); // 存储被拖动元素的 ID
  setTimeout(() => { dragElem.style.display = 'none'; }, 0); // 拖动时隐藏原元素（视觉优化）
});

// 允许在目标区域放置
target.addEventListener('dragover', (e) => {
  e.preventDefault(); // 必须阻止默认行为才能触发 drop
});

// 进入目标区域
target.addEventListener('dragenter', (e) => {
  if (e.target === target) {
    target.style.background = '#f0f0f0';
  }
});

// 离开目标区域
target.addEventListener('dragleave', (e) => {
  if (e.target === target) {
    target.style.background = '';
  }
});

// 释放放置
target.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(id);
  
  // 将元素移动到目标区域
  target.appendChild(draggedElement);
  target.style.background = '';
  draggedElement.style.display = 'block'; // 恢复显示
});

登录后复制