JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/normalize/2.1.3/normalize.min.css">
<ul id="sortable1" class="droptrue">
    <li id="list1-item1" class="ui-state-default" data-stuff='["text", "First Name", "required"]'>Can be dropped..</li>
    <li id="list1-item2" class="ui-state-default">..on an empty list</li>
    <li id="list1-item3" class="ui-state-default">Item 3</li>
    <li id="list1-item4" class="ui-state-default">Item 4</li>
    <li id="list1-item5" class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="dropfalse">
    <li id="list2-item1" class="ui-state-highlight" data-label="first test" data-type="text" data-required="required">Cannot be dropped..</li>
    <li id="list2-item2" class="ui-state-highlight" data-content="second test">..on an empty list</li>
    <li id="list2-item3" class="ui-state-highlight" data-content="third test">Item 3</li>
    <li id="list2-item4" class="ui-state-highlight" data-content="fourth test">Item 4</li>
    <li id="list2-item5" class="ui-state-highlight" data-content="fifth test">Item 5</li>
</ul>
<ul id="sortable3" class="droptrue"></ul>
<button type="submit">Submit</button>

CSS

#sortable1, #sortable2, #sortable3 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    margin-right: 10px;
    background: #eee;
    padding: 5px;
    width: 143px;
}
#sortable1 li, #sortable2 li, #sortable3 li {
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
#info {
    margin: 30px auto;
}

JavaScript

$("ul.droptrue").sortable({
    connectWith: "ul",
    stop: function (event, ui) {
        var sortedIDs = $("ul.droptrue").sortable("toArray");
        console.log(sortedIDs);
    }
});

$("ul.dropfalse").sortable({
    connectWith: "ul",
    dropOnEmpty: false
});

$("#sortable1, #sortable2, #sortable3").disableSelection();

$('button').click(function (event) {
    event.preventDefault();
    var type = $("#sortable2").sortable('toArray', {
        attribute: 'data-type'
    });
    var label = $("#sortable2").sortable('toArray', {
        attribute: 'data-label'
    });
    var stuff = $("#sortable1").sortable('toArray', {
        attribute: 'data-stuff'
    });
    var merge = $.merge(type, label);
    console.log(type, label);
    console.log(stuff);
});