JSFiddle - React, Tailwind, and code Playground

by anish274

HTML

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</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';
   $("#sortable").droppable({
     drop: function(event, ui) {
       if (origin === 'draggable') {
         ui.draggable.html('<span>Look at this new fancy HTML!</span>');
         console.log(ui.draggable);
         origin = 'sortable';
       }
     }
   }).sortable({
     revert: true
   });
   $("#draggable").draggable({
     connectToSortable: "#sortable",
     helper: "clone",
     revert: "invalid",
     start: function() {
       origin = 'draggable';
     }
   });

 });