JSFiddle - React, Tailwind, and code Playground

by Andry N

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
  </ul>
  <div id="tabs-1">
      <div class="elements">
          <div class="element">Element 1</div>
          <div class="element">Element 2</div>
          <div class="element">Element 3</div>
      </div>
  </div>
  <div id="tabs-2">
    <div class="elements">
          <div class="element">Element 11</div>
      </div>
      <div class="elements">
          <div class="element">Element 12</div>
      </div>
  </div>
</div>

CSS

.elements {
    margin: 4px;
    padding: 10px 5px;
}
.element {
    padding: 4px 8px;
    cursor: move;
}
.element:hover {
    background-color: #f1f1f1;
}
.elements.can-drop {
    outline: 1px dashed #ccc;
}
.elements.drop-here {
    outline: 1px solid #999;
}

JavaScript

$( "#tabs" ).tabs();
$('.elements').children().draggable({
    appendTo: 'body',
    opacity: 0.9,
    helper: "clone",
    zIndex: 1000,
    cursorAt: { left: 50, top: 20 },
});

// drop into needle element
$('.elements').droppable({
    accept: '.element',
    tolerance: 'pointer',
    activeClass: "can-drop",
    hoverClass: "drop-here",
    drop: function( event, ui ) {
        alert('Drop');
    }
});

// drop
$('.ui-tabs-nav').children().droppable({
    accept: '.element',
    tolerance: 'pointer',
    over: function( event, ui ) {
        log(event.target);
        
       $("#tabs").tabs("option", "active", 1);
        
    }
})