JSFiddle - React, Tailwind, and code Playground

by azrizhaziq

HTML

<div class="draggable" draggable="true" ondragstart="startDrag(event)" ondragend="endDrag(event)"
>

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo dicta atque voluptatibus repudiandae explicabo, quibusdam in at, recusandae adipisci consequatur et a, vitae temporibus iusto earum. Asperiores dolorum, rerum non.

CSS

.draggable {
  border-radius: 4px;
  background: #CC0000;
  width: 40px;
  height: 40px;
}

.hide {
  transform: translateX(-9999px);
}

JavaScript

function startDrag(e) {
	var element = e.target;
  
  setTimeout(function(){
  	element.classList.add('hide');
  });
}

function endDrag(e) {
  var element = e.srcElement;
  
  element.classList.remove('hide');
}