JSFiddle - React, Tailwind, and code Playground

by Bhushan Kawadkar

HTML

<div class="drag-item">
    <div class="cs-drop">drag 1 <a href="#"> remove</a>

    </div>
    <div class="cs-drop">drag 2 <a href="#"> remove</a></div>
    <div class="cs-drop">drag 3 <a href="#"> remove</a></div>
</div>
<div style="clear: both;"></div>
<div class="drop-container">drop here</div>
<div class="drop-container">drop here</div>
<div class="drop-container">drop here</div>

CSS

.cs-drop {
    padding: 40px 25px;
    border: 1px solid red;
    float: left;
}
.drop-container {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
}
.drop-container.active {
    background-color: red;
}

JavaScript

$(function(){
$('.cs-drop').draggable({
    revert: true
});

    $('.drop-container').droppable({
        hoverClass: 'active',
        drop: function (e, ui) {
            $(this).append(ui.draggable);
//            $(this).droppable('destroy');
        }


    });

$(".drop-container").on("click", ".cs-drop a", function () {
    $(this).closest('.cs-drop').fadeOut(200, function () {
        $('.drag-item').prepend($(this).clone().css('display','block'));
        $(this).remove();
    });
});
});