本文介绍了HTML5的Drag&Drop拖放API，通过两个实践例子详细讲解了拖动源对象和目标对象的7个事件，包括dragstart、drag、dragend、dragenter、dragover、dragleave和drop。示例涵盖了小飞机拖动移动以及模拟垃圾箱删除效果，同时讨论了在实现过程中遇到的问题及其解决方案。
【重点突破】——Drag&Drop拖动与释放
一、引言
在学习HTML5新特性的时候，学到了Drag&Drop这两种拖放API，这里根据拖动的是“源对象”还是“目标对象”做两个小练习，主要是为了理解与应用HTML5为拖放行为提供的7个事件。
二、七个事件
HTML5为拖放行为提供了7个事件，分为两组：
拖动的源对象（会动）可以触发的事件：
- dragstart:拖动开始
- drag:拖动中
- dragend:拖动结束
整个拖动过程：dragstart*1+drag*n+dragend*1
拖动的目标对象（不会动）可以触发的事件：
- dragenter：拖动着进入
- dragover：拖动着悬停在上方
- dragleave：拖动着离开
- drop: 在目标上方释放
整个拖动过程1：dragenter*1+dragover*n+dragleave*1
整个拖动过程2：dragenter*1+dragover*n+drop*1
三、可以随鼠标拖动而移动的小飞机
要求：使用拖动源对象提供的事件句柄。
小知识点：拖动事件是要求获得相对于整个页面的左上角的偏移量，使用e.pageX/pageY。（e.pageX与e.offsetX的区别：e.offsetX是相对于事件源左上角的偏移量）
问题1：h1有margin-top，会把body挤下来
解决方法：给body设置前置内容给元素，空格元素设为body的第一个子元素。这样即使h1有margin-top，也不会把body挤下来
body:before{
content:' ';
display:table;
}
问题2：浏览器默认拖动的源对象触发结束，自动定位位置到(0,0)点处
解决方法：当ex，ey都等于0的时候，跳出函数，不执行
if(ex===0 && ey===0){
return;//跳出函数，不执行
}
实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
position:relative;
margin:0;
}
body:before{
content:' ';
display:table;
}
#p3{
position:absolute;
}
</style>
</head>
<body>
<h1>拖动的源对象可能触发的事件</h1>
<h3>可以随着鼠标拖动而移动的飞机</h3>
<img
最低0.47元/天 解锁文章
5453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
