JSFiddle - React, Tailwind, and code Playground

by SkeLLLa

HTML

<div class="demo">
    <ul id="catalog" class="ui-widget-content">
        <p>Drag from here</p>
        <li class="catalogitem">
                <span> blabla</span>
        </li>
        <li class="catalogitem">
                <span> blabla 2</span>
        </li>
        <li class="catalogitem">
                <span> blabla 3</span>
        </li>
        <li class="catalogitem">
                <span> blabla 4</span>
        </li>        
    </ul>
        <ul id="playlist">

        </ul>
    </div>

CSS

#catalog, #playlist{
    width: 175px;
    height: 350px;
    padding: 0.5em;
    margin: 10px;
    background: #ddd;
    color:#000;
}

.demo { width: 500px }

.catalogitem, .accepteditem{
    background-color: #FFF;
    background-position: left top;
    background-repeat: no-repeat;
    border: 1px solid #EEE;
    border-bottom: 2px solid #DDD;
    border-right: 2px solid #DDD;
    cursor: move;
    float: left;
    height: 50px;
    margin: 10px;
    position: relative;
    width: 150px;
}
.catalogitemspan {
    bottom: 0;
    font-size: 16px;
    font-weight: bold;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

#cart {
    background-color: #FFF;
    border: 1px solid #F9F9F9;
    float: right;
    padding-bottom: 50px;
    width: 195px;
}
#cart .info {
    color: #444;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
}
#cart .item {
    background-position: 50% -22px;
    border-width: 1px;
    cursor: default;
    height: 50px;
    margin: 5px;
    width: 85px;
}

JavaScript

$(document).ready(function() {
    // add drag functionality
    $(".catalogitem").draggable({
        revert: false,
        helper: 'clone',
    });

    $("#playlist").droppable({
        accept: '.catalogitem',
        drop: function(e, ui) {
            $(this).append($(ui.draggable).clone());
            $("#playlist .catalogitem").addClass("accepteditem");
            $(".accepteditem").removeClass("catalogitem ui-draggable");
            //$(".item").removeClass("ui-draggable");
            //ui.draggable.appendTo($(this));
        }
    });

    $("#playlist").sortable({
        
    });
    
    $("#playlist").disableSelection();
})