Posts Tagged ‘jquery’

jQueryUI: draggable + selectable

Posted in to do on July 14th, 2013 by ericsoco – 1 Comment

Across the tubes, there are many hints toward getting jQueryUI’s draggable and selectable widgets to play nice with each other.

However, they all come back to a technique laid out in a post by Ryan Coughlin back in 2008. The basic strategy comes down to this:

  • use selectable() to enable marquee (lasso) selection and click-container-to-deselect;
  • use a click handler to manually set jQueryUI selectable classes (‘.ui-selectable’, etc)
  • hook into draggable() to copy the offset to all selected elements.

I modified a jsfiddle from a Stack Overflow post on the topic with clearer comments and updated jQuery (v1.9.1) and jQueryUI (v1.10.3) libs. Here it is: