jQuery UI Selectable

selection marquee in $3.4/$UI1.12

by David McClelland

HTML

<link rel="stylesheet" href="https://jqueryui.com/selectable/resources/demos/style.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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>
  <li class="ui-widget-content">Item 7</li>
</ol>

CSS

.ui-selectable-helper {
   position: absolute;
   z-index: 10000;
   border: 1px dotted black;
 }

 #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").selectable({
    start: function(e, ui){
        console.log('ui-selectable-helper: ' + $('.ui-selectable-helper').length);
    		console.log('ui-selectable-helper: ' + $('#ui-selectable-helper').length);
        }
    })
    var helper = $("#selectable").selectable('widget').data().uiSelectable.helper;
    helper.css({
      'border-color': 'green',
      'border-width': '2px'
    });
  });