JSFiddle - React, Tailwind, and code Playground

by Ali Soltani

HTML

List A
<ul>
  <li class="draggable">item1</li>
  <li class="draggable">item2</li>
</ul>

List B
<ul class="droppable">

</ul>

CSS

.droppable {
  height: 200px;
  border: 1px solid;
}

JavaScript

$('.draggable').draggable({
  helper: 'clone'
}).click(function() {
  alert($(this).text());
});


$('.droppable').droppable({
  drop: function(ev, ui) {
    // Add element with all events
    var dropElement = ui.draggable.clone(true, true);
    $(this).append(dropElement);
    
    // Add element without any events
    var dropElementWithoutEvents = ui.draggable.clone(true, true).off();       
    $(this).append(dropElementWithoutEvents);
  }
});