JSFiddle - React, Tailwind, and code Playground

by tonyjcamp

HTML

<div class="draggable" data-name="test-1">
    Draggable, test-1
</div>
<div class="draggable" data-name="test-2">
    Draggable, test-2
</div>
<div class="draggable" data-name="test-3">
    Draggable, test-3
</div>
<div class="draggable" data-name="test-4">
    Draggable, test-4
</div>
<div class="draggable" data-name="test-5">
    Draggable, test-5
</div>
<div class="draggable" data-name="test-6">
    Draggable, test-6
</div>
<div class="draggable" data-name="test-7">
    Draggable, test-7
</div>
<div class="droppable">
    Drop here
    <p>Status: <ul class="status"></ul></p>
    <button class="clear-list">Clear List</button>
</div>

CSS

.draggable { width: 90px; height: 90px; background: #e1e1e1; display: inline-block; margin: 5px; cursor: move; }
.droppable { width: 200px; min-height: 200px; background: #ccc; margin-top: 20px; }

JavaScript

var clearList = function($el) {
    $el.html('');
};

var checkLength = function($el) {
    if( $el.find('.pl-item').length >= 10 ) {
        return true;
    }
};

// remove single item
var removeItem = function($el) {
    $el.remove();        
};

// update list, ajax shiz

$( '.draggable' ).draggable({
    appendTo: 'body',
    helper: 'clone',
    revert: 'valid',
    opacity: .7
});

$( '.droppable' ).droppable({
    drop: function(event, ui) {
        if ( !checkLength( $( '.status' ) ) ) {
            // send info to ajax shiz, json, what-have-you
            $( '.status' ).append( '<li class="pl-item ' + ui.draggable.data('name') + '">' + ui.draggable.data('name') + '<button class="remove-item">x</button></li>' );
        } else  {
            // give me a nice error msg about too many items
            $( '.droppable' ).draggable({ disable: true });
        }
    }
});

$( '.clear-list' ).on( 'click', function() {
    clearList( $( '.status' ) );
    return false;
});

$( '.status' ).on( 'click', '.remove-item', function() {
    removeItem( $( this ).parent('.pl-item' ) );
    return false;
});