其他
【每日一练】43—鼠标拖拽效果的实现
写在前面
拖拽功能的实现，也是我们在学习JS时会经常拿来练习的一个项目，因为这个功能比较常见，也是实际开发中会经常遇到的，所以，今天这个练习，能够对你有所帮助。
当然，你不用完全按照这个来，如果你已经学习过了JavaScript，这个练习，你也可以直接跳过，或者也可以跟我们分享你的实现方法。
如果是跟着【每日一练】来的话，那就先练起来，先不要害怕，也不用担心，因为，没有人是天生就会的，行动起来，最为重要。
好了，我们一起来看一下今天练习的最终效果：
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>【每日一练】43—鼠标拖拽效果的实现</title> </head> <body> <div class="empty"> <div class="fill" draggable="true"></div> </div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div> </body></html>
* { box-sizing: border-box;}
body { background-color: steelblue; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0;}
.empty { height: 150px; width: 150px; margin: 10px; border: solid 3px black; background: white;}
.fill { background-image: url('images/01.jpg'); height: 145px; width: 145px; cursor: pointer;}
.hold { border: solid 5px #ccc;}
.hovered { background-color: #333; border-color: white; border-style: dashed;}
@media (max-width: 800px) { body { flex-direction: column; }}
const fill = document.querySelector('.fill')const empties = document.querySelectorAll('.empty')
fill.addEventListener('dragstart', dragStart)fill.addEventListener('dragend', dragEnd)
for(const empty of empties) { empty.addEventListener('dragover', dragOver) empty.addEventListener('dragenter', dragEnter) empty.addEventListener('dragleave', dragLeave) empty.addEventListener('drop', dragDrop)}
function dragStart() { this.className += ' hold' setTimeout(() => this.className = 'invisible', 0)}
function dragEnd() { this.className = 'fill'}
function dragOver(e) { e.preventDefault()}
function dragEnter(e) { e.preventDefault() this.className += ' hovered'}
function dragLeave() { this.className = 'empty'}
function dragDrop() { this.className = 'empty' this.append(fill)}写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号