jQuery UI: Maximizing Dialogs

The dialog widget can be resized by the user, as well as programatically, using the API. Dialogs can also be dragged around on the screen if the draggable option is left on — the default. Sometimes, just like a real desktop window, you may want to maximize the dialog to occupy the full browser window. Blot out all the other distractions, so to speak.

Containing Draggables by Parent and Grid

The draggable widget, available in jQuery UI, doesn't constrain movement by default. If you create a draggable, without passing in any options, you're free to drag it around anywhere on the page. While this makes sense as out-of-the-box default behaviour, it's very limited in terms of practicality. In the real world, you would probably want to specify a droppable target. Or, at least constrain the movement to within a specific element on your page.

Moving Draggables Within The DOM Tree

The jQuery UI draggable widget let's the user move elements around on the screen. This concept is all the more powerful when used in conjunction with a droppable container. This is essentially a target for the user to drop their draggables. One drawback is that despite the appearance of having been dropped into the new DOM node, this is not the case. The only thing that changes when draggables are moved around on the screen are their positional CSS properties. A lot of the time, it would be nice to have the draggable move not only in presentation properties, but to change it's position in the DOM tree too.

Fixing the Z Index For Draggables

It's not often that jQuery UI developers find themselves worrying about reading and setting the z-index CSS property. That's because it's not all that relevant - it controls the ordering of elements on the stack. For instance, items with higher values will move toward the front of the screen when overlapped with another element with a lower z-index value. When you're designing your web page, or some part of your web application, you're going to statically align and layout the various components at design time. Responsive design let's our elements respond to varying client browser environments - think of different screen sizes and the user changing the orientation or the dimensions of the browser window. Beyond this, unless the user is directly rearranging elements on the page, we're not too worried about the ordering of overlapping elements. But users do rearrange jQuery UI elements.

jQuery UI: Dragging Data Around

The draggable and droppable interaction widgets are great for taking any element and adding DnD behavior. Users can drag one element, and drop it into another. But, the draggable and droppable widgets aren't assigned to elements arbitrarily — they're based on some application logic. The data model that drives the application probably has something that represents an element visible to the user. For example, there might be a database table row corresponding to the product I'm looking at right now. That product might hold a reference to some parent object — a category or a cart for example. When the user re-arranges elements on the screen, they're doing so in order to change the state of the element, and not physically relocating it. So what's the best way to go about manipulating the application data using these widgets?

jQuery UI: Droppable Fundamentals

The draggable and droppable jQuery UI interaction components are cool.  But it turns out that after a recent experiment, I discovered a few things I had gotten wrong with the widgets in the past.  For example, reverting the draggable back to its original position on a failed drop, highlighting the droppable target while dragging, and changing the state of the draggable while dragging.  These are just the visible behaviors that help the user out.  There are a few things I'd got wrong with the code in the past too, so I've put together an example to illustrate some fundamental principles when working with these interactions.  Check out the comments in the code.