JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<h4>Content box</h4>
<div class="content-box"></div>
<p></p>

<h4>Border box</h4>
<div class="border-box"></div>
<p></p>

<h4>Sortable</h4>
<ol>
    <li>Pick up the milk</li>
    <li>Submit TPS report</li>
    <li>Make dentist appointment</li>
    <li>Order new red stapler</li>
    <li>Return books to the library</li>
    <li>Buy birthday gift for John</li>
    <li>Take out the trash</li>
    <li>Take over the world</li>
</ol>

CSS

h4          { margin: 2em 0 1em; }     
div         { border: 3px dashed #ccc; }
.border-box { box-sizing: border-box; }

ol { padding: 0; }
li {
    background: lightgray;
    cursor: move;
    list-style: none;
    margin: 0.5em 0;
    padding: 0.25em;
}
.placeholder {
    border: 3px solid gray;
}

JavaScript

function showHeight(selector) {
    $(selector).next('p')
        .text('Height: ' + $(selector).height());
}

function update() {
    showHeight('.content-box');
    showHeight('.border-box');
}

$(window).resize(update);
update();

$('ol').sortable({
    placeholder: 'placeholder',
    forcePlaceholderSize: true
});