jQuery in Action
308
CHAPTER 9
Prominent, powerful, and practical plugins
Exercise 10--Reset the Lab, and specify
grid
values of 100 and 100. After click-
ing Apply, note how the image can now only be dragged in discrete movements of
100 pixels in either direction. Play around with other values to observe their
behavior on the drag movement.
100 pixels in either direction. Play around with other values to observe their
behavior on the drag movement.
Exercise 11--Reset the Lab, and enter values of 10 and 10 for the
cursorAt
option. Click the Apply button. When a drag operation is started, the relative
position of the image and mouse pointer is set so that the pointer is positioned 10
pixels in either direction, relative to the upper-left corner of the image (near the
tip of the wing) no matter where the pointer was positioned within the image at
the start of the drag.
position of the image and mouse pointer is set so that the pointer is positioned 10
pixels in either direction, relative to the upper-left corner of the image (near the
tip of the wing) no matter where the pointer was positioned within the image at
the start of the drag.
Exercise 12--Go nuts! Play around with the settings of the lab, individually and
in concert, until you feel confident that you understand how they each affect the
drag operation of draggable elements.
drag operation of draggable elements.
Dragging things around the screen is all well and good, but is it really useful?
It's fun for a time, but like playing with a yo-yo (unless we're true aficionados), it
loses its charm quickly. In practical applications, we could use it to allow users to
move modular elements around the screen (and if we're nice, we'd remember
their chosen positions in cookies or other persistence mechanisms), or in games
or puzzles.
loses its charm quickly. In practical applications, we could use it to allow users to
move modular elements around the screen (and if we're nice, we'd remember
their chosen positions in cookies or other persistence mechanisms), or in games
or puzzles.
Drag operations truly shine when there's something interesting to drop dragged
elements on. Let's see how we can make droppables to go with our draggables.
Dropping dragged things
The flip side of the coin from draggables is droppables--elements that can accept
dragged items and do something interesting when such an event occurs. Creating
droppable items from page element is similar to creating draggables; in fact, it's
even easier because there are fewer options to worry about.
dragged items and do something interesting when such an event occurs. Creating
droppable items from page element is similar to creating draggables; in fact, it's
even easier because there are fewer options to worry about.
And like draggables, droppables are split into two script files: the basic file that
defines the
droppable()
command and its basic options and an option file that con-
tains the extended options. These files are
ui.droppable.js
ui.droppable.ext.js
The syntax for the
droppable()
command is as follows: