H5拖拽7個事件
1.簡介
（1）藍圖
拖動源
放置目標
拖放並不是單純的把目標從一個地方移動另一個地方，其實是促成成功互動的操作過程中的反饋。
游標指示當前的位置是否可防置目標
使用者提示是移動、連結或者複製
滑鼠經過的地方樣式改變，提示此處可以放置。
為滿足以上的要求，瀏覽器在拖拽的每個過程中發起一系列的事件。
資料傳輸：一組物件，這個物件用來公開儲存，拖動資料儲存是拖放操作的基礎。可以將傳輸資料理解成拖放的中央控制部分，用於反饋的圖片以及資料自身的檢索全部都在資料傳輸中管理。類似網路傳輸談判，此時根本無需讓拖動源和放置目標知道彼此的存在。此時其重要作用的就是MIME型別！
（2）MIME 多功能因特網郵件擴充套件服務
text/plain
image/png
image/jpeg
text/x-age 傳遞自定義的資訊型別
事件
事件捕獲：從父輩–→中間–→子輩
事件冒泡：反向
event.stopPropagation //阻止事件沿事件捕獲鏈向下傳遞 或者 通過冒泡階段向上傳遞。
event.preventDefault //阻止事件的預設行為，比如連結跳轉。
“------------------------------------------------------------------------------------------------------------”
2.H5拖拽的7個事件分別是
ondragstart 只能在這個事件的過程中支援dataTransfer通過setData來設定資料。這是為了安全考慮。編號1
ondrag 拖動過程中持續發生的事件。就是滑鼠移動的過程中會反覆的呼叫此事件。編號2
ondragenter 拖動跨入了頁面中新元素的時候觸發，適用於設定拖放的放置反饋。編號3
ondragleave 恢復放置反饋，與上一事件相對。編號4
ondragover 不同於drag事件，此事件是在當前滑鼠停留的目標上呼叫。編號5
ondrop 釋放滑鼠呼叫，要放置包含處理放置動作的程式碼。編號6
ondragend 在拖動源中觸發，適合清空拖動過程的狀態。編號7
3.設定、傳輸和控制
設定可以拖動，很簡單就一句話
<div id = "huang" draggable="true">
setData(formate, data) //設定資料
getData(formate) //獲得資料
types 一陣列形式返回所有當前註冊的格式
items 返回所有想及其相關格式的列表
files 返回與放置相關的所有檔案
clearData( )
//更改拖放反饋
setDragImage(element, x, y)：圖片出現在滑鼠的旁邊，則x，y就是相對滑鼠的偏移了。
addElement(element)通知瀏覽器將引數作為拖動反饋影象來繪製。？
//設定開發人員設定和查詢 4.下面再進行展示一段程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale=1>
<title>拖拽7個事件</title>
<style>
body{
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
}
#left{
width: 150px;
height: 300px;
background-color: hotpink;
user-select: none;
}
#right{
width: 150px;
height: 300px;
background-color: skyblue;
user-select: none;
}
</style>
</head>
<body>
<div id="left" draggable="true">目標元素</div>
<div id="right" draggable="true">拖拽元素</div>
<script>
let n = 0;
//拖拽元素 你當前拖動的元素
const right = document.querySelector('#right');
//拖拽一瞬間
right.ondragstart = function () {
this.style.backgroundColor = 'red';
};
//連續觸發
right.ondrag = function () {
document.title = n++
}
right.ondragend = function () {
this.style.backgroundColor = 'skyblue';
}
//目標元素 目的地，把拖動的元素，拖動到哪裡
const left = document.querySelector('#left');
left.ondragenter = function () {
this.style.backgroundColor = 'orange';
//滑鼠進入才行
this.innerText = '請釋放滑鼠';
}
left.ondragleave = function () {
this.style.backgroundColor = 'hotpink';
this.innerText = '滑鼠離開';
};
//在目標元素上連續觸發
left.ondragover = function (e) {
document.title = n++;
e.preventDefault();
e.stopPropagation();
return false;
};
//具體要做什麼，非常重要
//在目標元素上釋放滑鼠
left.ondrop = function () {
//具體做啥操作,在此操作
console.log(123);
document.body.removeChild(right);
return false;
}
</script>
</body>
</html>
5.火狐與谷歌的相容性問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>火狐相容</title>
<style>
body{
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
}
*{
margin: 0;
padding: 0;
}
body>*{
width: 150px;
height: 300px;
user-select: none;
}
#left{
text-align: center;
background-color: hotpink;
line-height: 300px;
}
ul li{
text-align: center;
height: 35px;
line-height: 35px;
color: blue;
margin: 15px auto;
border: 2px dashed #dddddd;
}
</style>
</head>
<body>
<div id="left">請拖拽內容到此區域</div>
<ul id="list">
<li draggable="true">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const aLi = document.querySelectorAll('li');
const list = document.getElementById('list');
aLi.forEach((item,index)=>{
//谷歌下
item.setAttribute('draggable','true');
item.ondragstart = function (e) {
console.log(e.dataTransfer);
const dt = e.dataTransfer;
//火狐
dt.setData('key',index);
}
})
//拖拽進入
left.ondragenter = function () {
this.innerText = '請釋放你的滑鼠';
};
//阻止預設事件
left.ondragover = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
//拖拽離開目標物體時
left.ondragleave = function () {
this.innerText = '請拖拽內容到此區域';
};
//拖拽結束時
left.ondrop = function (e) {
const dt = e.dataTransfer;
console.log(dt.getData('key'));//獲取索引
console.log(list);
list.removeChild(aLi[dt.getData('key')]);
}
</script>
</body>
</html>