jQuery in Action
Introduction to the UI Plugin
313
Let's dig in and get the skinny on droppables using this lab.
Exercise 1--In this exercise, we're going to begin familiarizing ourselves with
Exercise 1--In this exercise, we're going to begin familiarizing ourselves with
the
Accept
option, which is what tells the droppable what constitutes a suitable (or
acceptable) draggable. Although this option can be set to any jQuery selector
(or even a function that can programmatically make suitability determinations),
for the purpose of the lab, we'll concentrate on elements that possess particular
class names. In particular, we can specify a selector that includes any of the class
names
(or even a function that can programmatically make suitability determinations),
for the purpose of the lab, we'll concentrate on elements that possess particular
class names. In particular, we can specify a selector that includes any of the class
names
flower
,
dog
,
motorcycle
, and
water
by checking the appropriate check
boxes of the
Accept
option controls.
The six draggable image elements on the left side of the Test Subject pane are
each assigned one or two of these class names based on what appears in the
image. For example, the upper-left draggable possesses the class names
image. For example, the upper-left draggable possesses the class names
dog
and
flower
(because both a dog and some flowers appear in the photo), whereas the
lower-middle image is defined with the class names
motorcycle
and
water
(a
Yamaha V-Star and the Colorado River, to be precise).
Before clicking Apply, try to drag and drop any of these elements on the Drop
Zone. Aside from the dragging, not much happens. Carefully observe the call-
back indicators, and note how they don't change. This should be no surprise
because, at outset, no droppable even exists on the page.
back indicators, and note how they don't change. This should be no surprise
because, at outset, no droppable even exists on the page.
Now, leaving all controls in their initial conditions (including all
accept
check
boxes checked), click the Apply button. The executed command includes an
accept
option that specifies a selector that matches all four class names.
Once again, try to drag any of the images to the Drop Zone while observing
the callback indicators. This time, you'll see the Activate indicator briefly high-
light, or throb, when you begin moving any of the images, indicating that the
droppable has noticed that a drag operation has commenced and that the drag-
gable is acceptable for dropping.
light, or throb, when you begin moving any of the images, indicating that the
droppable has noticed that a drag operation has commenced and that the drag-
gable is acceptable for dropping.
Drag the image over and out of the Drop Zone a number of times. The over
and out callbacks are invoked (as shown by the corresponding indicators) at the
appropriate times. Now, drop the image outside the confines of the Drop Zone,
and watch the Deactivate indicator throb.
appropriate times. Now, drop the image outside the confines of the Drop Zone,
and watch the Deactivate indicator throb.
Finally, repeat the drag operation except, this time, drop the image on top of
the Drop Zone. The Drop indicator throbs (indicating that the drop callback was
invoked). Note, also, that the Drop Zone is wired to display the most recent image
that was dropped upon it.
invoked). Note, also, that the Drop Zone is wired to display the most recent image
that was dropped upon it.
Exercise 2--Uncheck all of the
accept
check boxes, and click Apply. No matter
which image you choose, no callback indicators throb, and nothing happens