JSFiddle - React, Tailwind, and code Playground

by arjuncc

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<div class="row">
    <div class="button" data-item="10">Item 10</div>
    <div class="button" data-item="11">Item 11</div>
    <div class="button" data-item="12">Item 12</div>
</div>

<div class="dropme">
    <div>List Item 1</div>
    <div>List Item 2</div>
    <div>List Item 3</div>
    <div>List Item 4</div>
    <div>List Item 5</div>
</div>

<br />

<div class="dropme">
    <div>List Item 1</div>
    <div>List Item 2</div>
    <div>List Item 3</div>
    <div>List Item 4</div>
    <div>List Item 5</div>
</div>

CSS

.row {
    display: block;
    width: 100%;
    height: auto;
}
.button {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 8px 15px;
    border: 1px solid #ccc;
    text-align: center;
    background: #eee;
}

.dropme {
    display: inline-block;
    width: auto;
    height: auto;
    overflow: hidden;
    margin-top: 20px;
}

.dropme div {
    display: block;
    width: 150px;
    border: 1px solid #ccc;
}

.highlight {
    padding: 5px;
    border: 2px dotted #fff09f;
    background: #fffef5;
}

JavaScript

// You must also include jQuery UI for this to work
$('.button').draggable({
    cursor: 'pointer',
    connectWith: '.dropme',
    helper: 'clone',
    opacity: 0.5,
    zIndex: 10
});

$('.dropme').sortable({
    connectWith: '.dropme',
    cursor: 'pointer'
}).droppable({
    accept: '.button',
    activeClass: 'highlight',
    drop: function(event, ui) {
        var $li = $('<div>').html('List ' + ui.draggable.html());
        $li.appendTo(this);
    }
});