jQuery UI Selectable Demo

Selectable Images Demo Part 2 (Mobile Friendly)

In part 1 of this post, I demonstrated a very simply way to make objects selectable using the jQuery UI Selectable module. Unfortunately, jQuery UI has limited support for touch events so this could make your application unusable on a mobile device.

All is not lost however, as we can make use of a fantastic, tiny plugin called “jQuery UI Touch Punch” that is maintained by David Furfero at the following URL http://touchpunch.furf.com/.

To implement touch events you simply download the minified (production) version of the plugin and reference it in your html document.

Demo

See the Pen jQuery UI Selectable Demo with Images and Touch Support by Mark Taylor (@codesnips) on CodePen.0

Code

HTML

<h1>Jquery UI Selectable Demo with Images</h1>
<p>Draw a box with your cursor to select items. Hold down the Ctrl key or drag your finger across the images to make multiple, non-adjacent selections. </p>

<div id="selectable">
  <img src="http://dummyimage.com/190x190/2c488f/ffffff&text=Image+1" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/522F93/ffffff&text=Image+2" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/882F93/ffffff&text=Image+3" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/932F64/ffffff&text=Image+4" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/6D932F/ffffff&text=Image+5" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/2F9379/ffffff&text=Image+6" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/2F7993/ffffff&text=Image+7" class="ui-widget-content" />
</div>

<p class="selected-items">You have selected the following images: <span id="selected-item-list"></span></p>

CSS

#selectable .ui-selecting {
  border: 2px dashed #ff0000;
}

#selectable .ui-selected {
  border: 2px solid #ff0000;
  -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
  -moz-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
  box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
}

#selectable img {
  margin: 5px;
  padding: 5px;
  border: 2px solid #ffffff;
}
.selected-items {
  border: 2px solid #ff0000;
  line-height: 32px;
}

JavaScript
Include the following scripts in your document.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

Now include your version of the script to initiate the selectable plugin and handle the selections, I have included a simple example below.

$(function() {
  $("#selectable").selectable({
    selected: function() {
      var selectedItemList = $("#selected-item-list").empty();
      $(".ui-selected", this).each(function() {
        var index = $("#selectable img").index(this);
        selectedItemList.append((index + 1) + ", ");
      });
    }
  });
});

Published by

Mark Taylor

Web developer, based in Bourne, Lincolnshire, UK. builder of web applications, ASP.NET, Web Standards HTML, CSS & JavaScript. SQL Server & MySQL DB developer.

Leave a Reply

Your email address will not be published. Required fields are marked *