|
|
@ -1,8 +1,9 @@
|
|
|
|
const fill = document.querySelector('.fill')
|
|
|
|
const fill = document.querySelector('.fill')
|
|
|
|
const empties = document.querySelectorAll('.empty')
|
|
|
|
const empties = document.querySelectorAll('.empty')
|
|
|
|
|
|
|
|
const body = document.body
|
|
|
|
|
|
|
|
|
|
|
|
fill.addEventListener('dragstart', dragStart)
|
|
|
|
body.addEventListener('dragstart', dragStart)
|
|
|
|
fill.addEventListener('dragend', dragEnd)
|
|
|
|
body.addEventListener('dragend', dragEnd)
|
|
|
|
|
|
|
|
|
|
|
|
for(const empty of empties) {
|
|
|
|
for(const empty of empties) {
|
|
|
|
empty.addEventListener('dragover', dragOver)
|
|
|
|
empty.addEventListener('dragover', dragOver)
|
|
|
@ -11,13 +12,17 @@ for(const empty of empties) {
|
|
|
|
empty.addEventListener('drop', dragDrop)
|
|
|
|
empty.addEventListener('drop', dragDrop)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function dragStart() {
|
|
|
|
function dragStart(e) {
|
|
|
|
this.className += ' hold'
|
|
|
|
if(!e.target.classList.contains("fill")) {
|
|
|
|
setTimeout(() => this.className = 'invisible', 0)
|
|
|
|
e.preventDefault()
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
fill.className += ' hold'
|
|
|
|
|
|
|
|
setTimeout(() => fill.className = 'invisible', 0)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function dragEnd() {
|
|
|
|
function dragEnd() {
|
|
|
|
this.className = 'fill'
|
|
|
|
fill.className = 'fill'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function dragOver(e) {
|
|
|
|
function dragOver(e) {
|
|
|
|