jQueryUI: draggable + selectable

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:

One Comment

  1. Benoit Wery says:

    Hi
    event.metaKey doesn’t seems to work anymore, event.ctrlKey work fine for me (windows 7, chrome 32).

    http://jsfiddle.net/6f9zW/86/
    http://bugs.jquery.com/ticket/11328

Leave a Reply

Additional comments powered by BackType