• Choose a category
• All
• Classic-Fiction

By Root 1179 0

to be draggable along either the X or Y axis only, and the containment option confines the object to a bounding box; acceptable values are 'parent', 'document', and 'window' (to stay within the respective DOM elements), or an array of values to specify pixel boundaries in the form [x1, y1, x2, y2]. You can also use the grid option to confine dragging to a grid, by specifying a two element array (for example, grid:[20,20]).

Let’s look at another example:

$('#dragIt').draggable({

handle: 'p:first',

opacity: 0.5,

helper: 'clone'

});

For this next bunch of options, we’re operating on a div called dragIt, which contains at least one

tag. We use the handle option to designate the first p element as the “handle” users can use to drag the draggable element around. We also specify the helper option, which allows you to specify an element to represent the node being dragged around. In this case we’ve set this option to clone. This causes the element to be duplicated, so that the original element will stay in place until you’ve finished dragging. The opacity applies to the helper element.

The other option worth noting is revert. If you set this to invalid (as we did in our photo dragging example), the element you drag will spring back to its original position if you drop it outside of a droppable target area.

There are also three events you can catch—start, stop, and drag—that fire when you start dragging, stop dragging, and are in mid-drag respectively. In our example we only need to react to drop, but you can easily conceive of situations where the other two events could be put to good use.

droppable

The Bonnie to draggable’s Clyde is the droppable behavior. Droppable elements are targets for draggable items. A droppable element has far fewer options than a draggable element; we’ve used the most important, activeClass and hoverClass, above. The activeClass is added to the droppable element when a draggable item is being dragged. Similarly, the hoverClass is added when a draggable item is hovering over the droppable element.

You can also specify a selector for the accept option, which restricts the draggables that can be dropped. This lets you have multiple drop points, where only certain draggable items can go. This can be great for list manipulation.

The events for a droppable element are similar to draggables. Instead of start, stop, and drag we have over, out, and drop. In our photo grid example, we’ve used the drop event to know when to destroy the draggable item.

Both the draggable and droppable behaviors are complex beasts. Once you’re over the thrill of how easy they are to implement, you should have a further read through the advanced options in the documentation.

The “Puff” Effect

With dragging and dropping all taken care of, you can walk away knowing you’ve created a powerful yet cool control with just a few lines of code. But with all that time we saved by using the existing drag and drop functionality, rather than writing it ourselves, we might as well make this a little more impressive—and add the “puff of smoke” as the image is removed.

Instead of using jQuery’s animate function, we’ll need to roll our own animation solution. This is because we need to cycle through image frames—like creating cartoons. To do this we’ll use a PNG image that has five same-sized frames of animation all stacked on top of each other, and then offset the image to show the correct frame. This means we’ll need to change the position of the image in discrete chunks. If we were to use animate instead, it would change the background position gradually, resulting in chopped-off images halfway between frames:

chapter_07/14_drag_drop/script.js (excerpt)

// Implement the “puff-of-smoke” effect

var $this = $(which);

var image_width = 128;

var frame_count = 5;

To start off, we’ll store our selection and set up a couple of constants. The image_width is the width in pixels of the animation image. The frame_count is the total number of frames in the animation (the total height of the image, therefore, should be image_width