Drag and Drop

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.

drag me

drop here

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, que 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: https://flaviocopes.com/drag-and-drop/ https://www.html5rocks.com/pt/tutorials/dnd/basics/