JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div class="source">
    <div class="item"><span class="closer">x</span>Item 1</div>
    <div class="item"><span class="closer">x</span>Item 2</div>
    <div class="item"><span class="closer">x</span>Item 3</div>
    <div class="item"><span class="closer">x</span>Item 4</div>
    <div class="item"><span class="closer">x</span>Item 5</div>
</div>
<div class="target">
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
</div>

CSS

body { background: #fff; }

.source, .target { margin: 20px; width: 400px; border: 1px solid green;  }
.target { border: 1px solid blue; }

.item { height:20px; margin:5px; padding:5px; border:1px solid gray; background-color: #cd8; position: relative; }
.item .closer { position: absolute; right: 5px; top: 2px; font: bold 14px arial; color: #666; padding: 1px 3px; line-height: 1; cursor: pointer; display: none;}
.item .closer:hover { color: #000; }

.empty { height: 30px; margin: 5px; background: #eee; border: 1px dashed #999; }
.empty .item { margin: 0; }
.empty .item .closer { display: block; }

.highlight { border: 1px solid red; background: #fff; }
.highlight .item { opacity: 0.3; }

.ui-draggable-dragging { z-index: 99; opacity: 1 !important; }

JavaScript

$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone',
        start: function(ev, ui){ ui.helper.width($(this).width()); }                    // ensure helper width
    });

    $(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight',
        drop: function(ev, ui){
            var item = ui.draggable;
            if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
            this.innerHTML = '';                                                        // clean the placeholder
            item.css({ top: 0, left: 0 }).appendTo(this);                                // append item to placeholder
        }
    });

    $(".target").on('click', '.closer', function(){
        var item = $(this).closest('.item');
        item.fadeTo(200, 0, function(){ item.remove(); })
    });