讲师中心 微信公众号
AI工具推荐 视频效率加速

如何用JavaScript实现拖放_需要哪些事件

千瑶君_9083

千瑶君_9083

发布时间:2026-01-12 18:11:02

|

1021人浏览过

|

来源于php中文网

原创

dragstart 必须调用 dataTransfer.setData(),dragover 必须 preventDefault(),drop 必须 preventDefault() 并 getData();移动端不支持原生 drag/drop,需用 touch 事件模拟或第三方库。

如何用javascript实现拖放_需要哪些事件

dragstart 事件必须设置 dataTransfer

没有 dataTransfer.setData(),后续的 dragover 和 drop 就不会触发——浏览器默认会忽略拖放行为。常见错误是只加了 draggable="true" 却忘了在 dragstart 里存数据。

实操建议:

立即学习“Java免费学习笔记(深入)”;

dmap-jsapi-skill
dmap-jsapi-skill

DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载
  • 必须在 dragstart 中调用 event.dataTransfer.setData('text/plain', 'some-id')(类型和值可自定义)
  • 若想允许拖入目标区域,dragover 里必须调用 event.preventDefault(),否则 drop 永远不触发
  • 推荐用 'text/plain' 或 'application/json' 类型,避免用 'text/html' 引发意外解析

drop 事件里要主动阻止默认行为

很多开发者以为只要监听了 drop 就够了,结果发现文件或链接被浏览器直接打开/下载——这是因为浏览器对 drop 有默认处理逻辑。

实操建议:

立即学习“Java免费学习笔记(深入)”;

  • drop 回调中第一行必须写 event.preventDefault()
  • 再通过 event.dataTransfer.getData('text/plain') 取出之前存的数据
  • 如果拖的是真实文件(比如从桌面拖进页面),要用 event.dataTransfer.files 而不是 getData()

dragover 的 preventDefault 很容易漏掉

dragover 是唯一能“告诉浏览器:这里允许放置”的机会。它本身不带业务逻辑,但缺了它,drop 根本不会触发——哪怕你已经绑了 drop 事件。

实操建议:

立即学习“Java免费学习笔记(深入)”;

  • 目标容器必须监听 dragover,且必须同步调用 event.preventDefault()
  • 可以顺便设 event.dataTransfer.dropEffect = 'move' 来改变光标样式
  • 不要只靠 CSS 的 cursor: move,那只是视觉反馈,不影响实际拖放流程

移动端不支持原生 drag/drop API

所有主流 iOS 和 Android 浏览器(包括 Safari、Chrome for Android)都不支持 dragstart/drop 等事件。这不是 bug,是规范明确不强制实现的部分。

实操建议:

立即学习“Java免费学习笔记(深入)”;

  • 做跨端项目时,别指望一套代码跑通 PC 和手机
  • 移动端需改用 touchstart/touchmove/touchend + 位置计算模拟拖放
  • 第三方库如 interact.js 或 sortablejs(带 touch 支持版本)更可靠
document.querySelector('#draggable').addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', e.target.id);
});

document.querySelector('#dropzone').addEventListener('dragover', e => {
  e.preventDefault(); // 关键!
  e.dataTransfer.dropEffect = 'move';
});

document.querySelector('#dropzone').addEventListener('drop', e => {
  e.preventDefault(); // 关键!
  const id = e.dataTransfer.getData('text/plain');
  e.target.appendChild(document.getElementById(id));
});
拖放真正难的不是事件名记不住,而是每个环节都依赖上一个环节的显式许可——少一次 preventDefault,整个链条就断了。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2095

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3162

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1076

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3619

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2686

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5179

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3707

2026.03.24

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4256

2023.06.20

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

0

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 5.9万人学习

CSS教程
CSS教程

共754课时 | 97.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn