Usando a API Drag and Drop, você pode definir quais elementos da página são arrastáveis e interceptar quando o usuário arrasta um elemento.
Para definir quais elementos são 'arrastáveis', basta adicionar o atributo HTML draggable com valor 'true':
<div class="container">
<div class="draggable one" draggable="true">drag me</div>
<div class="draggable two" draggable="true">drag me</div>
<div class="droptarget">drop here</div>
<div class="droptarget">drop here</div>
</div>
Agora, quem faz o trabalho é o Javascript:
document.querySelectorAll('.draggable').forEach(item => {
item.addEventListener('dragstart', event => {
event.dataTransfer.setData('text/plain', getComputedStyle(item).backgroundColor)
})
})
document.querySelectorAll('.droptarget').forEach(item => {
item.addEventListener('dragover', event => {
event.preventDefault()
})
item.addEventListener('dragleave', event => {
item.classList.remove('hover')
})
item.addEventListener('dragenter', event => {
item.classList.add('hover')
})
item.addEventListener('drop', event => {
item.style.backgroundColor = event.dataTransfer.getData('text/plain')
})
})
CSS:
.container {
display: grid;
grid-template-columns: 50% 50%;
}
.draggable, .droptarget {
border: 20px solid white;
margin: 30px;
padding: 30px;
text-align: center;
color: white;
font-size: 2rem;
}
.one {
background-color: #f15e0f;
}
.two {
background-color: #a532f1;
}
.droptarget {
border: 10px dashed white;
transition: border-width 0.5s linear;
background-color: aquamarine;
}
.hover {
border-width: 20px;
}
Para saber mais acesse: