HTML5拖放详解：事件与实例演示
7 浏览量
更新于2024-08-30
收藏 89KB PDF 举报
HTML5拖放（Drag and Drop）是一项强大的交互式功能，允许用户通过直接拖动元素在页面上实现数据交换或布局调整。在HTML5标准中，所有元素都支持拖放操作，即使没有显式设置`draggable`属性，像链接和图片这样的元素通常默认具有此能力。
在开始使用拖放功能前，了解关键事件是必要的。这些事件在拖放过程的不同阶段触发：
1. `ondragstart`：当用户开始拖动元素时，这个事件会在源元素上触发。在这个阶段，你可以执行初始化操作，比如设置拖动图标或清除原有样式。
2. `ondrag`：在拖动过程中，每一步移动都会触发此事件，可以用于更新状态或跟踪当前位置。
3. `ondragend`：用户释放元素后，表示拖动结束，这时可以进行后续处理，如保存拖动历史或更新目标元素。
4. `ondragenter`：当被拖动的对象进入另一个元素的容器区域时，该事件触发，用于显示悬停提示或者改变元素样式。
5. `ondragover`：拖动期间，当鼠标停留在目标区域时，每隔一段时间（在Safari中是350毫秒）会触发，用来控制是否接受拖放行为。
6. `ondragleave`：当拖动的元素离开目标区域时，此事件会触发，恢复默认样式或取消悬停提示。
7. `ondrop`：这是最关键的一个事件，当用户释放鼠标并完成拖放操作时，`ondrop`事件会在目标元素上触发。在此时，可以接收被拖动的数据，并根据需求进行处理。
下面是一个简单的HTML5拖放实例，展示了如何创建一个可拖动的图片（img_w3slogo.gif）到指定的矩形区域内（div1）：
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>拖动<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(e) {
e.preventDefault(); // 阻止默认行为，防止元素自动放置
}
function drag(e) {
e.dataTransfer.setData("text", "图片数据"); // 设置拖动数据
}
function drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text");
console.log("图片数据:", data); // 接收并处理拖放的数据
// 实现将图片数据放置到div1内的逻辑
}
</script>
</body>
</html>
```
这个例子中，`drag()`函数设置了拖动数据，`allowDrop()`阻止了默认的放置行为，而`drop()`函数则接收并处理了拖放到目标区域的数据。请注意，为了实现跨浏览器兼容性，可能需要检查浏览器支持情况，并根据需要添加额外的polyfill或调整事件处理方式。
HTML5 拖放（拖放（Drag 和和 Drop）详解与实例代码）详解与实例代码
简介简介
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
先点击一个小例子：在用户开始拖动 <p> 元素时执行 JavaScript
<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>
提示： 链接和图片默认是可拖动的，不需要 draggable 属性。
定义和用法定义和用法
在拖放的过程中会触发以下事件：
在拖动目标上触发事件 (源元素): ondragstart – 用户开始拖动元素时触发
ondrag – 元素正在拖动时触发
ondragend – 用户完成元素拖动后触发
释放目标时触发的事件: ondragenter – 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover – 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave – 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop – 在一个拖动过程中，释放鼠标键时触发此事件
浏览器支持浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
注意:Safari 5.1.2不支持拖动；在拖动元素时，每隔 350 毫秒会触发 ondragover 事件。
实例实例
先贴代码，再逐一解释：
<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
下载后可阅读完整内容，剩余3页未读，立即下载
2012-03-05 上传
2008-11-04 上传
2021-01-19 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
2020-12-20 上传
2012-06-29 上传
2021-06-29 上传
weixin_38693586
- 粉丝: 7
- 资源: 923
我的内容管理
展开
最新资源
- 平尾装配工作平台运输支撑系统设计与应用
- MAX-MIN Ant System：用MATLAB解决旅行商问题
- Flutter状态管理新秀：sealed_flutter_bloc包整合seal_unions
- Pong²开源游戏：双人对战图形化的经典竞技体验
- jQuery spriteAnimator插件：创建精灵动画的利器
- 广播媒体对象传输方法与设备的技术分析
- MATLAB HDF5数据提取工具：深层结构化数据处理
- 适用于arm64的Valgrind交叉编译包发布
- 基于canvas和Java后端的小程序“飞翔的小鸟”完整示例
- 全面升级STM32F7 Discovery LCD BSP驱动程序
- React Router v4 入门教程与示例代码解析
- 下载OpenCV各版本安装包，全面覆盖2.4至4.5
- 手写笔画分割技术的新突破：智能分割方法与装置
- 基于Koplowitz & Bruckstein算法的MATLAB周长估计方法
- Modbus4j-3.0.3版本免费下载指南
- PoqetPresenter：Sharp Zaurus上的开源OpenOffice演示查看器
