拖拽事件执行顺序:dragstart dragenter dragover dragleave dragenter dragover drop dragend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
li {
width: 100%;
min-height: 184px;
padding: 10px;
margin-top: 10px;
border: 1px dashed #ccc;
box-sizing: border-box;
}
.enter-border {
border-color: #409EFF;
}
</style>
</head>
<body>
<ul class="ulu">
<li class="uli"></li>
<li class="uli">
</li>
<li class="uli">
<img src="./336320c97403549ae717df08bf01ade.jpg" width="184" height="184" alt="">
<img class="drag-img" src="./af9d6053d4bd87e48000c33cc4da47d.jpg" draggable="true" width="184" height="184"
alt="">
<img class="drag-img" src="./微信图片_20221114171818.jpg" draggable="true" width="184" height="184" alt="">
</li>
</ul>
</body>
<script>
/*
* 拖拽事件执行顺序:dragstart dragenter dragover dragleave dragenter dragover drop dragend
*/
let dragImg = document.querySelectorAll('.drag-img')
let uli = document.querySelectorAll('.uli')
let select = null
for (let ev of dragImg) {
ev.addEventListener('dragstart', dragStart)
ev.addEventListener('dragend', dragEnd)
}
for (let ev of uli) {
// 拖拽进入时
ev.addEventListener('dragenter', dragEnter)
// 拖拽进入后
ev.addEventListener('dragover', dragOver)
// 拖拽离开
ev.addEventListener('dragleave', dragLeave)
// 拖拽放置
ev.addEventListener('drop', drop)
}
function dragStart (e) {
select = this
}
function dragEnter () {
this.classList.add('enter-border')
console.log('dragenter');
}
function dragOver (e) {
e.preventDefault()
console.log('dragover');
}
function dragLeave () {
this.classList.remove('enter-border')
console.log('dragleave');
}
function drop () {
this.classList.remove('enter-border')
this.append(select)
console.log('drop');
}
function dragEnd () {
console.log('dragend');
}
</script>
</html>