JSFiddle - React, Tailwind, and code Playground

by Gil Barbara

HTML

on change:<br>
this.removeClass("nth-child-even").filter(":even").addClass("nth-child-even");<br>
<br>
on click top ou play:<br>
trigger same button on realQueue<br>
<br>
storage<br>
$(".songlist .queue.realPlaylist .song:first").data("songData").fileId<br>

JavaScript

$(".songlist .queue.realPlaylist").sortable("option", { axis: false, connectWith: ".MultiList", helper: 'clone', revert: true });

$("<div/>").attr('id', 'new_queue').addClass("MultiList playlist-container").css({ position: 'absolute', top: 99, left: 760, width: 218, height: 400, zIndex: 1001, backgroundColor: '#F7F7F7' }).sortable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ".songlist .queue .song",
    scope: 'default',
    helper: "clone",
    receive: function( event, ui ) {
        console.log(event, ui);
        $(ui.draggagle).clone(true).removeClass("topSong").appendTo(this);
    }
}).appendTo('#outer');