jQuery in Action
314
CHAPTER 9
Prominent, powerful, and practical plugins
when you drop an image on the Drop Zone. Without a meaningful
accept
option,
our Drop Zone has become a brick.
Exercise 3--Try checking at least one
accept
check box, say Flower, and note
how only images with flowers in them (known to the page as such because the
class name
class name
flower
was defined for them) are construed to be acceptable items.
Try again with whatever combinations of acceptable class names you like until
you're comfortable with the concept of the
accept
option.
Exercise 4--Reset the controls, check the
activeClass
radio button
green-
Border
, and click Apply. This supplies an
activeClass
option to the droppable
that specifies a class name that defines (you guessed it) a green border.
Now, when you begin to drag an image that's acceptable to the droppable (as
defined by the
accept
option), the black border around the Drop Zone is replaced
by a green border. If you have trouble getting this to work for you on your own
pages, note that you need to be mindful of
pages, note that you need to be mindful of
CSS
precedence rules. When an
active-
Class
class name is applied, it must be able to override the rule that assigns the
default visual rendition that you wish to supplant. This is also true of
hoverClass
.
Exercise 5--Check the
hoverClass
radio button labeled RedBorder, and click
Apply. When an acceptable image is dragged over the Drop Zone, the border
changes from green (as a result of the
changes from green (as a result of the
activeClass
setting) to red.
Experiment with these two option settings until you're comfortable with the
timing in the drag operation where each option triggers a class change.
Exercise 6--For this exercise, choose each of the various
tolerance
radio but-
tons, and note how the setting affects when the droppable makes the transition
from active to armed state (as described by the definition of this option in
table 9.3). This transition can easily be observed by setting the
from active to armed state (as described by the definition of this option in
table 9.3). This transition can easily be observed by setting the
hoverClass
option
or when the Over callback indicator throbs.
Like their counterpart draggables, droppables can be destroyed, temporarily
disabled, and then re-enabled. The methods to do so are as follow:
Command syntax: droppableDestroy
droppableDestroy()
Removes the ability to serve as a droppable from all elements in the wrapped set
Parameters
none
Returns
The wrapped set
The wrapped set