JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<button type="button">Serialize</button>
<ul id="sortable1" class="connectedSortable">
    <li id="first_1" class="ui-state-default">Item 1.1</li>
    <li id="first_2" class="ui-state-default">Item 1.2</li>
    <li id="first_3" class="ui-state-default">Item 1.3</li>
    <li id="first_4" class="ui-state-default">Item 1.4</li>
    <li id="first_5" class="ui-state-default">Item 1.5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
    <li id="second_1" class="ui-state-highlight">Item 2.1</li>
    <li id="second_2" class="ui-state-highlight">Item 2.2</li>
    <li id="second_3" class="ui-state-highlight">Item 2.3</li>
    <li id="second_4" class="ui-state-highlight">Item 2.4</li>
    <li id="second_5" class="ui-state-highlight">Item 2.5</li>
</ul>

CSS

#sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}
#sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

JavaScript

// https://forum.jquery.com/topic/sortable-connected-lists-to-mysql-//problem#14737000005909121

$( "#sortable1, #sortable2" ).sortable({
    connectWith: ".connectedSortable"
}).disableSelection();
$('button').click(function() {
    alert($('#sortable1').sortable('serialize') + '\n----------------------\n' +
          $('#sortable2').sortable('serialize'));
});