JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<div id="blok-1" class="ui-widget-content">
  <p>Blok 1</p>
</div>
    
<div id="blok-2" class="ui-widget-content">
  <p>Blok 2</p>
</div>
    
<div id="blok-3" class="ui-widget-content">
  <p>Blok 3</p>
</div>

CSS

#blok-1,#blok-2,#blok-3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }

JavaScript

$(function() {
$( ".ui-widget-content" ).draggable({stack: "div"}).droppable({
      greedy: true,
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function( event, ui ) {
          
       var draglanan = ui.draggable.attr("id");
       var target = event.target;
       var id =  target.id;
          addClass: id;
          $('#'+id).attr('rel', id);
          $('#'+draglanan).attr('rel', id);
          alert(draglanan);
          
      },
      
      out: function(event, ui) {
      var target = event.target;
       var id =  '0';
      }
  });
});