You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
840 B
39 lines
840 B
4 years ago
|
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)
|
||
|
|
}
|