JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div class="element">Drag me</div>
<div id="content">
  <div class="container">
   drop here (container)
  </div>
</div>

CSS

#content {
  height: 400px;
  border: 1px solid;
}

.element {
  width: 70px;
  height: 25px;
  background: red;
  text-align: center;
}

.validClass{
  background: green;
}

.container{
  width:200px;
  height: 200px;
  border: 1px solid green;
}

JavaScript

$(init);

    function init() {
        $('.element').draggable({
            containment: '#content',
            cursor: 'move',
            revert: "invalid",
        });

        $('.container').droppable({
            hoverClass: 'validClass',
            accept: '.element',
            drop: function (event, ui) {
                var draggedElement = ui.draggable.clone();
                $(event.target).append(draggedElement.html('dragged'));
            }                    
        });
    }