50projects50days/drag-n-drop/script.js

39 lines
840 B
JavaScript
Raw Normal View History

2020-11-23 17:00:08 +00:00
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)
}