JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<ul id="sortable">
  <li class=" drop">Item 1 Right</li>
  <li class=" drop">Item 2 Right</li>
  <li class=" drop">Item 3 Right</li>
  <li class=" drop">Item 4 Right</li>

</ul>

<ul id="sortable1">
  <li class="ui-state-highlight" >Item 1 Right</li>
  <li class="ui-state-highlight" >Item 2 Right</li>
  <li class="ui-state-highlight" >Item 3 Right</li>
  <li class="ui-state-highlight" >Item 4 Right</li>

</ul>

JavaScript

$(document).ready(function(){
    $(".drop").draggable({
        helper:"clone",
        revert:"invalid"
    });
    $("#sortable1 li").droppable({
        drop: function(event,ui){
            $(this).html(ui.helper.html());
        }
    });
});