Untitled

dabblet.css

body{
	background: darksalmon;
}
 
.fill{
	position: relative;
	background-color: blue;
	width: 150px;
	height: 150px;
	top: 5px;
	left: 5px;
	cursor: pointer;
}

.empty{
	display: inline-block;
	height: 160px;
	width: 160px;
	margin: 10px;
	border: 3px solid salmon;
	background-color: white;
}

.hold{
	border: solid 4px #ccc;
}

.hovered{
	background: #f4f4f4;
	border: 3px dashed blue;
}

.invisible{
	display: none;
}

dabblet.html

<div class="empty"> 
	<div class="fill" draggable="true">
	</div>
</div>
<div class="empty"> </div>
<div class="empty"> </div>
<div class="empty"> </div>
<div class="empty"> </div>
<br>
<div class="console"> </div>

dabblet.js

const fill = document.querySelector('.fill');
const empties = document.querySelectorAll('.empty');
const console = document.querySelector('.console');

fill.addEventListener('dragstart', dragStart);
fill.addEventListener('dragend', dragEnd);

for(var i = 0; i < empties.length; i++){
  empties[i].addEventListener('dragover', dragOver);
  empties[i].addEventListener('dragenter', dragEnter);
  empties[i].addEventListener('dragleave', dragLeave);
  empties[i].addEventListener('drop', dragDrop);

}

function dragStart(){
  const element = this;
  this.classList.add('hold');
  setTimeout(function(){ element.classList.add('invisible')}, 0);
}

function dragEnd(){
  this.className = 'fill';
}

function dragOver(e){
  e.preventDefault();
}

function dragEnter(e){
  e.preventDefault();
  this.classList.add('hovered');
}

function dragLeave(){
  this.classList.remove('hovered');
}

function dragDrop(){ 
  const newFill = fill;
  fill.parentElement.removeChild(fill);
  this.appendChild(fill);
  this.classList.remove('hovered');
}

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}