JSFiddle - React, Tailwind, and code Playground

by Raghu N

HTML

<div id="draggable">
Drag Me!
</div>

<div class="list">
<div class="sample2">
Contact 1
</div>
<div class="sample2">
Contact 2
</div>
<div class="sample2">
Contact 3
</div>
<div class="sample2">
Contact 4
</div>
</div>

CSS

.sample2 {
		background-color: white;
		
	}
	.sample2:hover {
		background-color: lightgrey;
	}
	:not(.dragentered).selected {
		background-color: grey !important;
	}
	
	.dragentered {
	  color: white;
	  background-color: orange;
	}

JavaScript

$('#draggable').draggable();
$('.list .sample2').droppable({accept: '#draggable', hoverClass: 'dragentered'})
$('.sample2').click(function() {
  $(this).parent().find('.sample2').removeClass('selected');
  $(this).addClass('selected');
});