JSFiddle - React, Tailwind, and code Playground

by anish274

HTML

<ul id="draggable">
  <li class="ui-state-highlight">input (type = text)</li>
  <li class="ui-state-highlight">input (type = file)</li>
  <li class="ui-state-highlight">submit button</li>
</ul>
<br />
<br />
<br />
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

CSS

ul {
  list-style-type: none;
  width: 50%;
  margin: 0 auto;
  padding: 0;
}

span {
  color: red;
  font-weight: bold;
}

JavaScript

$(function() {
       var origin = 'sortable';
       var helpersArr = ['<input type="text" />', '<input type="file" />', '<input type="submit" value="Save" />'];
       var helper;
       $("#sortable").droppable({
         drop: function(event, ui) {
           if (origin === 'draggable') {
             ui.draggable.html(helper);
             origin = 'sortable';
           }
         }
       }).sortable({
         revert: true
       });
       $("#draggable li").draggable({
         connectToSortable: "#sortable",
         helper: function() {
           helper = helpersArr[$(this).index()];
           return helper;
         },
         revert: "invalid",
         start: function() {
           origin = 'draggable';
         }
       });

     });