JSFiddle - React, Tailwind, and code Playground

by Nick Craver

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 class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li 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

/* du - debug utils */
 var du = {  
     /* setup */
      debug : true,
      outputType:  "console",    
     /* wrapper function */
      echo : function(str, output) {  
         outputType =  (typeof output == 'undefined') ? this.outputType : output;
         if(this.debug) {
             this[outputType](str);
         }
      },  
     /* custom output methods */    
      alert : function(str) {  
          alert(str);  
      },  
      console : function(str) {  
         if (window.console && window.console.firebug) {
             console.log(str);
         }
      }  
 }  
        
$(function() {
       var metaKey, ctrlKey;
       $( "#selectable" ).selectable();
    
       $( "#selectable" ).bind( "selectablestart", function(event, ui) {
          var result = $( "#select-result" ).empty();
           du.echo(event);
           metaKey = true;
           ctrlKey = true;    
       });
    
        
        $( "#selectable" ).bind( "selectablestop", function(event, ui) {
           du.echo(metaKey);
           du.echo(ctrlKey);           
       });
    });