JSFiddle - React, Tailwind, and code Playground

by Ali Soltani

HTML

<div class="demo">
  
<ul>
  <li class="draggable ui-state-highlight">Drag me down</li>
</ul>

<h2>#form_builder_sortable</h2>
<ul id="form_builder_sortable" class="sortable">
  <li class="ui-state-default draggable">Item 1</li>
  <li class="ui-state-default draggable">Item 2</li>
  <li class="ui-state-default draggable">Item 3</li>
</ul>
  <h2>#form_builder_sortable_sample</h2>
  <ul id="form_builder_sortable_sample" class="sortable">
  <li class="ui-state-default draggable">Item 1</li>
  <li class="ui-state-default draggable">Item 2</li>
  <li class="ui-state-default draggable">Item 3</li>
  <li class="ui-state-default draggable">Item 4</li>
</ul>

</div>

CSS

.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px; }
.demo li { margin: 0px; padding: 5px; width: 150px; }

JavaScript

$(".sortable").sortable();

$(".draggable").draggable({
  connectToSortable: '.sortable',
  helper: 'clone'
});