JSFiddle - React, Tailwind, and code Playground

by clarmond

HTML

<div class="demo">

<ul id="sortable">
    <li class="ui-state-default selectable">1</li>
    <li class="ui-state-default selectable">2</li>
    <li class="ui-state-default selectable">3</li>
    <li class="ui-state-default selectable">4</li>
    <li class="ui-state-default selectable">5</li>
    <li class="ui-state-default selectable">6</li>
    <li class="ui-state-default selectable">7</li>
    <li class="ui-state-default selectable">8</li>
    <li class="ui-state-default selectable">9</li>
    <li class="ui-state-default selectable">10</li>
    <li class="ui-state-default selectable">11</li>
    <li class="ui-state-default selectable">12</li>
</ul>

</div>

CSS

div.demo {
    margin: 20px auto;
    width: 500px;
}
.ui-selected {
    border: 1px solid #c00;
}
#sortable {
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}
#sortable li { 
    margin: 3px 3px 3px 0; 
    padding: 1px; 
    float: left; 
    width: 100px; 
    height: 90px; 
    font-size: 4em; 
    text-align: center; 
}

JavaScript

$(function() {
    $("#sortable").sortable({
        start: function(event, ui) {
            console.log('starting sort');
        }
    });
    $(".selectable").dblclick( function(){
        console.log("Double clicked");
    });
    $(".selectable").click( function(){
        console.log("Single clicked");
    });        
});