JSFiddle - React, Tailwind, and code Playground

by phoenix_suresh

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all">

<div class="demo">

<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

<ol id="selectable">
    <li id="one" class="ui-widget-content">Item 1</li>
    <li id="two" class="ui-widget-content">Item 2</li>
    <li id="three" class="ui-widget-content">Item 3</li>
    <li id="four" class="ui-widget-content">Item 4</li>
    <li id="five" class="ui-widget-content">Item 5</li>
    <li id="six" class="ui-widget-content">Item 6</li>
</ol>

</div>

CSS

#feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

JavaScript

$(function() {
    $("#selectable").bind("mousedown", function(e) {
        e.metaKey = true;
    }).selectable({
        stop: function() {
            var result = $( "#select-result" ).empty();
             $( ".ui-selected", this ).each(function() {
                    result.append( $(this).attr("id")+"," );
             });
         }
    });

});