JSFiddle - React, Tailwind, and code Playground

by Tistklehoff

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<div>
	<ul id="container">
		<li class="grupo" draggable="true" id="grupo1">
			<span>Grupo 1</span>
			<ul>
				<li class="item" draggable="true" id="item1">
					<span>Item 1</span>
				</li>
				<li class="item" draggable="true" id="item2">
					<span>Item 2</span>
				</li>				
			</ul>			
		</li>
		<li class="grupo" draggable="true" id="grupo2">
			<span>Grupo 1</span>
			<ul>
				<li class="item" draggable="true" id="item3">
					<span>Item 3</span>
				</li>
			</ul>			
		</li>		
	</ul>
</div>

<hr/>

<div>
	<ul id="drop-target">
		<li class="grupo" id="target-grupo1">
			<span>Grupo 1</span>
			<ul>
				<li class="item" id="target-item1">
					<span>Item 1</span>
				</li>
				<li class="item" draggable="true" id="target-item2">
					<span>Item 2</span>
				</li>				
			</ul>			
		</li>
		<li class="grupo" id="target-grupo2">
			<span>Grupo 1</span>
			<ul>
				<li class="item" id="target-item3">
					<span>Item 3</span>
				</li>
			</ul>			
		</li>		
	</ul>
</div>

CSS

#drop-target .over { font-weight: bold;

JavaScript

$(function(){
		$("#container").on("dragstart", ".grupo", function(evt){
			console.debug("iniciando arrastre de " + evt.target.id);

			evt.originalEvent.dataTransfer.setData("text", evt.target.id);
      evt.originalEvent.dataTransfer.setData("data", evt.target);
			evt.originalEvent.dataTransfer.effectAllowed = "move";
		});


		$("#drop-target").on("drop", ".item", function(evt){
			console.debug("soltando " + evt.originalEvent.dataTransfer.getData("text"));
      console.debug("soltando " + evt.originalEvent.dataTransfer.getData("data"));

			$(this).removeClass("over");
			evt.originalEvent.dataTransfer.setData("text", evt.target.id);
			evt.originalEvent.dataTransfer.dropEffect = "move";
		});



		$("#drop-target").on("dragover", ".item", function(evt){	
			evt.preventDefault();
		}); 
    
		$("#drop-target").on("dragenter", ".item", function(evt){	
			$(this).addClass("over");
		});
    
		$("#drop-target").on("dragleave", ".item", function(evt){	
			$(this).removeClass("over");
		});         
    
  });