当前位置：秒秒学 – 编程 – Web前端开发 – HTML5 Drag&Drop

HTML5 Drag&Drop

4032
1

HTML5 Drag&Drop

超值优惠：168元购买黄金VIP，秒秒学所有教程（含速成班）任看一年！

教程相关信息

作者郑晶，刘芳，张卉应用 web开发语言专题 HTML5 难度中级

教程简介内容折叠

以前我们想实现元素的拖放效果，基本上都是使用DOM事件模型中的Mousedown、Mouseover、Mouseup等事件，来监听鼠标的动作，不停地获取鼠标的坐标来修改元素的位置。这导致代码比较多，而且性能上也不是很好（不停的修改元素的位置导致页面的reflow）现在有了html5原生的Drag &Drop事件（DnD），方便了许多，而且性能也有了提高。本章内容就来学习HTML5 Drag &Drop API。

目录
HTML5 Drag&Drop
01 Drag&Drop事件简介 | 02 浏览器支持度 | 03 Drag&Drop基础 | 04 使用选择器 | 05 触发事件规律分析 | 06 给被拖源和目标容器添加样式 | 07 利用Drag&Drop实现可排序列表 | 08 Drag&Drop数据传输类型 | 09 获取Files数据传输类型对象信息 | 10 设置和执行Drag&Drop效果 | 11 自定义拖动图像 | 12 Drag&Drop模块实例解析