JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drag1">Drag me</div>

<div class="dropzone drop1" id="droppable" data-accept="drag1">Drop allow</div>

<div class="dropzone drop2" id="droppable-bad" data-accept="whatever">Drop disallow</div>

CSS

.drag1 {
  width: 100px;
  height: 100px;
  background: #ccc;
}

.drop1 {
  width: 200px;
  height: 200px;
  background: #0f0;
  float: left;
}

.drop2 {
  width: 200px;
  height: 200px;
  background: #f00;
  float: left;
}

JavaScript

$(".drag1").draggable();

// Create all droppables
$( ".dropzone" ).droppable();

// Drop handler for all droppables
$('.dropzone').on( "drop", function( event, ui ) {
debugger;
	var $drag = ui.draggable;
  var $drop = $(this);

  if ($drag.hasClass( $drop.data('accept') )) { 
    console.log("MATCHED!");
  }
  else {
    console.log("MISMATCHED!");
  }

  // anyway disable the draggable
  ui.draggable.draggable('disable');
});