JSFiddle - React, Tailwind, and code Playground

by dado_eyad

HTML

<div class="sort">
    
        
        <div>
            <h1 style="display:inline-block; vertical-align:middle">Developer Days-1</h1>
            <button id="create-track" style="display:inline-block; vertical-align:middle; margin-left:20px;">Create new Track</button>
            <span id="saving-data" style="display:none;">saving data</span>
        </div>
        
        <ul id="times" style="list-style: none; display:inline-block; clear:both; vertical-align:top; margin-right:10px;">
        
            <li value=""  class="cell ui-state-disabled">Developer Days-1
                </li>
        
            <li  data="2012-03-27 08:00" class="cell ui-state-disabled">2012-03-27 08:00
                </li>
        
            <li  data="2012-03-27 13:00" class="cell ui-state-disabled">2012-03-27 13:00
                </li>
        
            <li  data="2012-03-27 15:00" class="cell ui-state-disabled">2012-03-27 15:00
                </li>
        
            <li  data="2012-03-27 17:00" class="cell ui-state-disabled">2012-03-27 17:00
                </li>
        
            <li  data="2012-03-27 18:00" class="cell ui-state-disabled">2012-03-27 18:00
                </li>
        
            <li  data="2012-03-27 19:00" class="cell ui-state-disabled">2012-03-27 19:00
                </li>
        
        </ul>
    
        
        <ul id="tracks" style="list-style: none; display:inline-block; clear:both; vertical-align:top; margin-right:10px;">
        
            <li value="1"  class="cell ui-state-disabled">1: Track 1 - Developer Days  - 1
                </li>
        
            <li   class="cell">asd
                
                <button value="summit/14" id="edit-session">Edit</button>
                <input type="hidden" name="session-14-time" class="time" value="2012-03-27 08:00" />
                <input type="hidden" name="session-14-track" class="track" value="1" />
                </li>
        
            <li   class="cell">Chrome /...

CSS

ul {
    list-style: none;
    display: inline-block;
    clear: both;
    vertical-align: top;
    margin-right: 10px;
}
ul li {
    list-style-type: none;
    display: block;
    min-height: 26px;
    margin-top: 5px;
    background: #EBEBEB;
}
div {
    display: block;
}
ul li.drag{
    background:#ebebeb;
}
ul li.cell{
    background:#999;
}

JavaScript

$("div.sort ul").sortable({
    items: "li:not(.ui-state-disabled)",
    connectWith: "div ul",
}).disableSelection();

$("div.sort").sortable({
    items: "ul:not(.ui-state-disabled)",
}).disableSelection();