August 3, 2010

JQuery Draggable and Droppable

On a whim, I recently whipped together and launched REOrganize, a small JavaScript application that lets users simulate arranging furniture around in a room via dragging and dropping.

To build this quickly, I utilized JQuery's fantastic UI library full of ready-made effects and widgets. To take advantage of these effects for yourself, go ahead and download JQuery UI -- you can even create your own custom build to strip out libraries you don't need and save space.

Draggable

JQuery UI makes adding effects absolutely painless. All you need to do is use a JQuery selector (I've written a quick cheatsheet on JQuery selectors back here if you need some refreshing) to select the elements you would like to be made draggable, and call the .draggable() method.

$('.class-to-drag').draggable();

That's the most basic implementation that will allow you the element to be made 'draggable'. Of course, you can add all sorts of extra options for more complex functionality:

currRect.draggable({
  containment: 'parent',
  grid: [factor, factor],
  snap: true,
  snapMode: 'outer',
  stack: '.rect-margin'
});

Here's some code from REOrganize.

The containment property allows you to specify if the element should be contained (ie. should not allow dragging outside of some container) -- for example, in REOrganize, each desk/bed rectangle cannot be dragged outside of the room container.

grid allows you to specify a grid for the elements to snap-to, otherwise they can be dragged pixel by pixel.

Similarly, snap allows elements to snap-to other elements (handy for users to line things up easily). You can also attach event listeners/callbacks for drag start, drag stop, and during drags like I did here to reset icon positions during/after drags:

currDoor.draggable({
  containment: 'parent',
  grid: [factor, factor],
  axis: 'x',
  drag: function() {
  resetInfoPosition($(this), wall);
  },
  stop: function() {
  resetInfoPosition($(this), wall);
  }
});

Be sure to check out more of these options and events on the Draggable API!

Droppable

Last year I participated in the Zynga Hackathon at UC Berkeley, an 18 hour overnight coding competition (we won Honorable Mention!).

One of the wow factors of our application was how we opened new content - a user would be able to select from a top menu of icons, drag and drop the icon into the open space, and a new window would blossom open.

How did we achieve this? With the help of JQuery, of course. Almost exactly like Draggable, you use JQuery selectors and the method .droppable() to assign droppable properties to an element:

$('.class-to-drop-on').droppable();

There are some helpful options you can include in the method arguments, but the real power comes from the event callbacks. You can detect if a draggable element is dragged over, dragged out, or dropped on the droppable element:

$( ".class-to-drop-on" ).droppable({
   drop: function() {
     //do something interesting
   }
});

More information can be found on the Droppable API. Go crazy!