JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<script src="http://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<ol class="sortable">
                <li>
                  Item 1
                </li>
                <li>
                  Item 2
                </li>
                <li>
                  Item 3 
                  <ol>
                    <li>Item 3.1</li>
                    <li>Item 3.2</li>
                    <li>Item 3.3</li>
                    <li>Item 3.4</li>
                    <li>Item 3.5</li>
                    <li>Item 3.6</li>
                  </ol>
                </li>
                <li>
                  Item 4
                </li>
                <li>
                  Item 5
                  <ol class="position-relative">
                    <li>Item 5.1</li>
                    <li>Item 5.2</li>
                    <li>Item 5.3</li>
                    <li>Item 5.4</li>
                    <li>Item 5.5</li>
                    <li>Item 5.6</li>
                  </ol>
                </li>
                <li>
                  Item 6
                </li>
              </ol>

CSS

li {
    display: block;
    margin: 5px;
    padding: 5px;
    border: 1px solid #cccccc;
    color: #0088cc;
    background: #eeeeee;
    cursor:move;
}

li.placeholder:before{
    content:'asdf';
    visibility:hidden;
}

ol{
    border: 1px solid #eeeeee;
    margin: 0 0 9px 0;
    min-height: 10px;
    list-style-type: none;
    position:relat
}

.dragged {
    position: absolute;
    top: 0;
    opacity: 0.5;
    z-index: 2000;
}

.position-relative{
    position:relative;
}
}

JavaScript

$(".sortable").sortable()