JSFiddle - React, Tailwind, and code Playground

by Igor Krupitsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ul id="sortable" class="list-group">
                    <li class="list-group-item active">Item 1</li>
                    <li class="list-group-item">Item 2</li>
                    <li class="list-group-item">Item 3</li>
                    <li class="list-group-item">Item 4</li>
                    <li class="list-group-item">Item 5</li>
                    <li class="list-group-item">Item 6</li>
                    <li class="list-group-item">Item 7</li>
                    <li class="list-group-item">Item 8</li>
                </ul>
            </div>
        </div>
    </div>

JavaScript

$(function () {
  $("#sortable").sortable();
});