JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:100%;width:100%;background-color:black;">
		<div id="list1" class="droppable list">
			<div class="item draggable">1</div>
			<div class="item draggable">2</div>
			<div class="item draggable">3</div>
			<div class="item draggable">4</div>
		</div>
		<div id="list2" class="droppable list">
			<div class="item draggable">5</div>
			<div class="item draggable">6</div>
		</div>
		<div id="list3" class="droppable list">
			<div class="item draggable">7</div>
		</div>
	</div>

CSS

body{
			margin:0 0 0 0;
            background-color:#666666;
		}
				
		.item{
			width:100%;
			height:40px;
			background-color:white;
			border:1px solid black;
			color:black;
			float:left;
			position:relative;
			cursor:move;
            background-color:$dedede;
		}
		
		.selected{
			background-color:#ff9900;
		}
		
		.list{
			height:400px;
			width:20%;
			border:1px solid yellow;
			position:absolute;
			top:20px;
			color:white;
			z-index:1;
		}
		
		#list1{			
			left:10%;
		}
		
		#list2{
			left:35%;
		}
		
		#list3{
			left:60%;
		}

JavaScript

$(document).ready(function(){
			 $(".droppable").droppable({
				drop: function(event, ui) {
					var $list = $(this);
					$helper = ui.helper;
					$($helper).removeClass("selected");
					var $selected = $(".selected");					
					if($selected.length > 1){						
						moveSelected($list,$selected);
					}else{
						moveItem(ui.draggable,$list);
					}										
				}, tolerance: "touch"
			 });
			 
			 $(".draggable").draggable({
				revert: "invalid",
				helper: "clone",
				cursor: "move",
				drag: function(event,ui){
					var $helper = ui.helper;
					$($helper).removeClass("selected");
					var $selected = $(".selected");	
					if($selected.length > 1){	
						$($helper).html($selected.length + " items");
					}										
				}
			 });
			
			function moveSelected($list,$selected){
				$($selected).each(function(){
					$(this).fadeOut(function(){
						$(this).appendTo($list).removeClass("selected").fadeIn();
					});					
				});				
			}
			
			function moveItem( $item,$list ) {
				$item.fadeOut(function() {
					$item.find(".item").remove();
					$item.appendTo( $list ).fadeIn();
				});
			}
			
			$(".item").click(function(){
				$(this).toggleClass("selected");
			});
			
		});