- 定義和用法：拖放是 HTML5 中非常常見的功能尊勿。
- 在拖放的過(guò)程中會(huì)觸發(fā)以下事件：
a) 在拖動(dòng)目標(biāo)上觸發(fā)事件 (源元素):
ondragstart - 用戶開始拖動(dòng)元素時(shí)觸發(fā)ondrag - 元素正在拖動(dòng)時(shí)觸發(fā)
ondragend - 用戶完成元素拖動(dòng)后觸發(fā)
b) 釋放目標(biāo)時(shí)觸發(fā)的事件— 當(dāng)拖拽元素在目標(biāo)容器上進(jìn)行操作的時(shí)候:
ondragenter - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件
ondragover - 當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件
ondragleave - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開其容器范圍內(nèi)時(shí)觸發(fā)此事件
ondrop - 在一個(gè)拖動(dòng)過(guò)程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件
- 在拖動(dòng)元素時(shí)诚啃，每隔350 毫秒會(huì)觸發(fā) ondrag 事件坠宴。
- 為了讓元素可拖動(dòng)仲吏，需要使用HTML5 draggable屬性
- 鏈接和圖片默認(rèn)是可拖動(dòng)的，不需要 draggable 屬性
- 可以通過(guò)addEventListener來(lái)添加拖拽相關(guān)事件
- 事件源：觸發(fā)事件的源，一般情況下我們會(huì)將相同操作的多個(gè)對(duì)象綁定到同一個(gè)處理事件夫嗓，同時(shí)傳遞當(dāng)前的對(duì)象到處理方法，這就是事件源參數(shù)
嘗試一下
let oUl = document.querySelector('#dragBox');
let oDragBox = document.querySelectorAll('li');
let oDelete = document.querySelector('.delete');
let currentDragDom = null;
for(let i=0; i<oDragBox.length; i++){
// 被拖動(dòng)的元素
oDragBox[i].ondragstart = function(e) {
currentDragDom = e.target;
oDragBox[i].style.cssText = 'background: #ccc;color: #fff;'
}
}
// 放入哪里
oDelete.ondrop = function(e){
currentDragDom.style.cssText = `background: rgb(18, 204, 250);color: #000;animation: scale 330ms ease-in-out`
oUl.removeChild(currentDragDom);
oDelete.appendChild(currentDragDom)
}
oDelete.ondragover = function(e){
e.preventDefault()
}
// 拖動(dòng)進(jìn)入的元素
oDelete.ondragenter = function(e) {
e.preventDefault();
e.target.style.cssText = `box-shadow: 0 0 12px 1px rgb(18, 204, 250) inset;`
}
// 拖動(dòng)離開元素
oDelete.ondragleave = function(e) {
e.target.style.cssText = `box-shadow: 0 0 12px 1px rgb(243, 167, 3) inset;`
}
