JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://examples.kevinchisholm.com/html5/drag-and-drop/css/drag-and-drop.css">
<!--

    Getting Started with HTML5 Drag-and-Drop
    blog.kevinchisholm.com
    Part IV: Multiple Draggables and Multiple Droppables

    Task # 3: The container that originally held the droppables will change appearance when empty
-->

<article>
		<header>
			<img src="http://examples.kevinchisholm.com/html5/drag-and-drop/images/html5-logo.png" class="html5-logo" >
			<hgroup>
			<h1>Getting Started with HTML5 Drag-and-Drop</h1>
			<h2><a href="http://blog.kevinchisholm.com">blog.kevinchisholm.com</a></h2>
			<h3>Part IV: Multiple Draggables and Multiple Droppables</h3>
			</hgroup>
	</header>
		<section id="content">
			<p class="instructions">Drag any blue square to any light brown box, or back to its original container. Each light brown box in the top row will accept only one blue square at a time. If you want to view the JavaScript for this example, click <a href="js/part-iv.js" target="_blank">here</a>.</p>
			<div class="drop-elements">
				<div class="dropElement droppable"></div>
				<div class="dropElement droppable"></div>
				<div class="dropElement droppable"></div>
				<div class="dropElement droppable"></div>
			</div>
			<div class="drag-elements droppable multipleChildren hasChild">
				<div id="drag1" class="dragElement redBorder">Drag me!</div>
				<div id="drag2" class="dragElement greenBorder">Drag me!</div>
				<div id="drag3" class="dragElement orangeBorder">Drag me!</div>
				<div id="drag4" class="dragElement pinkBorder">Drag me!</div>
			</div>
		<section>
</article>

JavaScript

(function(){
  //each droppable element needs this for its dragover event
  var allowDragover = function (event) {
    //prevent the browser from any default behavior
    event.preventDefault();
  },
  //each dragable element needs this for its dragstart event
  dragStartHandler = function (event) {
    var dragIcon = null;

    //set a reference to the element that is currenly being dragged
    event.originalEvent.dataTransfer.setData("id",event.target.id);

    //create a custom drag image
    dragIcon = document.createElement('img');
    dragIcon.src = 'http://bit.ly/bartSimpsonSkateboard200X200';

    //set the custom drag image
    event.originalEvent.dataTransfer.setDragImage(dragIcon, 100, 100); 
  },
  //each of the four light-brown boxes at top have this bound to their drop event
  dropHandlerSingle = function (event) {
    var id = '';

    //prevent the browser from any default behavior
    event.preventDefault();

    //only allow one child element at a time
    if($(this).children().length){return;}

    //get a reference to the element that is being dropped
    id = event.originalEvent.dataTransfer.getData("id");
    
    //add the hasChild class so that the UI can update
    $(event.target).addClass('hasChild');

    //trigger the custom event so that we can update the UI
    $(document).trigger('custom:dropEvent');

    //move the dragged element into the drop target
    event.target.appendChild(document.getElementById(id));
  }

  $(document).ready(function(){
    //cache a reference to all four blue draggable boxes
    var $dragElements = $('.dragElement');

    //make each dragElement draggable
    $dragElements.attr('draggable','true');

    //bind the dragStartHandler function to all dragElements
    $dragElements.bind('dragstart',dragStartHandler);

    //bind the dropHandlerSingle function to all of the droppable elements (omit the original container)
    $('.droppable').not('.multipleChildren').bind('drop',dropHandlerSingle);
      

   ...