定义和用法
ondrop 事件在可拖动元素或选取的文本放置在目标区域时触发。
拖放是 HTML5 中非常常见的功能。 更多信息可以查看我们 HTML 教程中的 HTML5 拖放。
注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。
提示： 链接和图片默认是可拖动的，不需要 draggable 属性。
在拖放的过程中会触发以下事件：
- 在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发
- 释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
上面的定义与用法来自 https://code.ziqiangxuetang.com/jsref/event-ondrop.html
下面代码代码是拖放的一个示例，其中藏的两个注意点（本人遇到的坑）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
width: 300px;
height: 300px;
background-color: #269ABC;
margin-right: 40px;
display: inline-block;
}
.block{
width: 50px;
height: 50px;
background-color: #0062CC;
display: inline-block;
}
</style>
</head>
<body>
<div class="block"></div>
<div class="container"></div>
<div class="container"></div>
</body>
<script>
var block = document.getElementsByClassName("block")[0];
block.ondragstart = null;
block.setAttribute("draggable", true);
block.ondragstart = function(e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.dropEffect = 'copy';
var data = 'text';
e.dataTransfer.setData("text", data); //在ie下第一个参数必须为 ‘text’, 谷歌和火狐则随意
}
var doms = document.getElementsByTagName("div");
for(var i=0;i<doms.length;i++){
doms[i].ondragover = function(e) {
e.target.style.cursor = "pointer";
e.preventDefault(); // 这段不写会触发不了ondrop事件
}
doms[i].ondragenter = function(e) {
e.preventDefault();
}
doms[i].ondragleave = function(e) {
e.target.style.cursor = "";
e.preventDefault();
}
doms[i].ondrop = function(e) {
var data = e.dataTransfer.getData("text");
var block = document.createElement("div");
block.className="block"
e.target.appendChild(block);
e.preventDefault();
}
}
</script>
</html>
1、在ondragover方法中需要加上e.preventDefault();（阻止浏览器默认行为），否则会导致ondrop方法一直触发不了。
2、在如果要兼容ie浏览器e.dataTransfer.setData方法的第一个参数必须是'text'或者'Text'，否则会报错。
![【每日一练】59—写一个中秋月饼的响应式卡片[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)