JSFiddle - React, Tailwind, and code Playground

by klaascuvelier

HTML

<div id="wrapper">
    <ul id="droplist">
        <li>item blaat</li>
        <li>koetjes</li>
        <li>schapen</li>
    </ul>

    <ul id="draglist">
        <li>extra 1</li>
        <li>slapen</li>
        <li>wordfeud</li>
        <li>bike baron</li>
        <li>cuvedev.net</li>
        <li>showpad</li>
    </ul>
</div>
<ul id="console"></ul>

CSS

#droplist {
    background: #eee;
    padding: 20px 20px;
    border: 1px solid #aaa;
}

#droplist li, .ui-draggable.ui-draggable-dragging {
    list-style-type: none;
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    padding: 10px 10px;
    margin: 10px 10px;
    background: #fff;
}

#draglist {
    padding: 10px 10px;
    margin: 50px 50px;
}

#draglist li {
    margin: 10px 10px;
    list-style-type: disc;
}

#draglist li.selected {
    background: rgba(100, 100, 100, 0.7);   
}

#console {
    position: absolute;
    background: #333;
    color: #55ff55;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    overflow: auto;
}

JavaScript

$(function() {
    $('#droplist').sortable({
        tolerance: 'pointer',
        helper: 'clone',

        update: function(event, ui) {
            //self.saveChange.call(self, ui.item);
        },

        beforeStop: function(event, ui) {
            //return listitem_to_icon(ui.item);
        },

        start: function(event, ui) {
            window.locked = true;
        },

        stop: function(event, ui) {
            window.locked = false;
        }
    });
    
    $('#droplist').droppable({
        drop: function (event, ui) {
            //console.log(ui.helper.html());
            $('#droplist').append(ui.helper.html());  
        } 
    });

    $('#draglist').delegate('li', 'click', function(e) {
        if (e.metaKey) {
            $(this).toggleClass('selected');
        }
    });

    $('#draglist').find('li').draggable({
        helper: function (event) {
            var list = $('#draglist'),
                items = [],
                drag_element = $('<ul></ul>');

            event.target.className += ' selected'; // make sure this item is selected
            items = list.find('li.selected');
            
            items.each(function (idx, el) {
               drag_element.append($(el).clone());
            });
            
            drag_element.wrap('<li class="ui-draggable ui-draggable-dragging">').appendTo('#wrapper');
            console.log(drag_element);
            return drag_element;
        },
        
        stop: function () {
            $('#droplist').find('li.selected').removeClass('selected');
        }
    });
});