定義和用法
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=)