JSFiddle - React, Tailwind, and code Playground

by justi

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/ui-lightness/jquery-ui.css">
<div class="demo">      
    <div id="products">     
        <h1 class="ui-widget-header">Categories</h1>         
        <div id="catalog">         
            <h3><a href="#">Teaching</a></h3>         
            <div>             
                <ul>                 
                    <li>SQL databases</li>
                    <li>Programming in Python</li>
                    <li>Advanced OOP</li>                         
                </ul>         
            </div>         
            <h3><a href="#">Research projects</a></h3>         
            <div>             
                <ul>                                  
                    <li>Agile</li>              
                </ul>         
            </div>         
            <h3><a href="#">Presenting</a></h3>         
            <div>             
                <ul>                 
                    <li>Presentinng 1</li>                        
                </ul>         
            </div>
            <h3><a href="#">Scientific writing</a></h3>  
            <div>       
                <div>             
                    <ul>                 
                        <li>Scientific diagrams</li>                       
                    </ul>         
                </div>          
            </div>
            <h3><a href="#">Bioinformatics</a></h3>
            <div>        
                <div>             
                    <ul>                 
                        <li>Introduction to PyMol</li>                       
                    </ul>         
                </div>          
            </div> 
            <h3><a href="#">Locations</a></h3>
            <div>        
                <div>             
                   ...

CSS

h1 { padding: .2em; margin: 0; }     
#products { float:left; width: 500px; margin-right: 2em; }     
#cart { width: 200px; float: left; }     
/* style the list to maximize the droppable hitarea */     
#cart ol { margin: 0; padding: 1em 0 1em 3em; }     </style>

JavaScript

$(function() {         
    $( "#catalog" ).accordion();         
    $( "#catalog li" ).draggable({             
        appendTo: "body",             
        helper: "clone"         
    });         
    $( "#cart ol" ).droppable({             
        activeClass: "ui-state-default",             
        hoverClass: "ui-state-hover",             
        accept: ":not(.ui-sortable-helper)",             
        drop: function( event, ui ) {                 
            $( this ).find( ".placeholder" ).remove();                 
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );             }         
    }).sortable({             
        items: "li:not(.placeholder)",             
        sort: function() {                 
            // gets added unintentionally by droppable interacting with sortable                 
            // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options                 
            $( this ).removeClass( "ui-state-default" );             
        }         
    });     
});