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';
             }
         });

     });