Practical prototype and scipt.aculo.us part 45 pot

The default options for Draggableenable an element to be moved anywhere on the page—but to make an element interact with potential drop targets, you’ll have to specify some options of yo

Trang 1

Making Draggables

Making draggables is easy The Draggableconstructor (the initializemethod that gets called when you instantiate a class) takes care of assigning the events that control drag-ging; it also handles communication with any droppables it encounters

The default options for Draggableenable an element to be moved anywhere on the page—but to make an element interact with potential drop targets, you’ll have to specify some options of your own

So let’s add some options Reload the page, and then run this code in the console:

$('container').select('li').each( function(li) {

new Draggable(li, { revert: true });

});

Play around with the draggables and you’ll notice the difference: they now move back (or revert) to their original positions at the end of the drag.

Another option controls how much freedom the draggable has in its movement Reload and try this code:

new Draggable(li, { snap: 50 });

});

Notice that these draggables move far less fluidly The 50value for snaptells them to

“snap” to points on the page that are separated by 50 pixels in both directions Before, each movement of the mouse also moved the draggable; now, the draggable moves to the closest x/y coordinates that are both multiples of 50

We could also have specified two values for snap;[10, 50]creates a grid of points

10 pixels apart on the x axis and 50 points apart on the y axis Better yet, we can set snap

to a function that determines, on each movement of the mouse, where the draggable should snap to Advanced usage of draggables will be covered later in the chapter

One other option deserves mention The handleoption lets you specify a smaller

piece of the draggable—not the whole draggable—to serve as the drag-enabled area of

the element A drag operation intercepts all clicks and cancels the associated events, so handles can be used to enable dragging without interfering with form element inter-action, link clicking, and so on

Trang 2

Let’s change part of our HTML to see this in action:

<li id="item_1">@ Lorem</li>

<li id="item_2">@ Ipsum</li>

<li id="item_3">@ Dolor</li>

<li id="item_4">@ Sit</li>

<li id="item_5">@ Amet</li>

</ul>

These spans will act as our “handles,” so let’s style them to stand out:

#container handle {

background-color: #090;

color: #fff;

font-weight: bold;

padding: 3px;

cursor: move;

}

The standard “move” cursor (which looks like arrows in four directions on Windows,

and a grabbing hand on the Mac) provides a visual clue to the user that the handles are

clickable

Make these changes, reload the page, and run this in the console:

new Draggable(li, { handle: 'handle' });

});

You’ll be able to drag the items around using their handles, but the rest of the

ele-ment won’t respond to clicking and dragging Notice, for instance, how you can select the

text inside each element—an action that was prevented when the draggable hogged all

the mouse actions on the element (see Figure 11-2)

Trang 3

Figure 11-2.Draggables are now moved by their handles.

Other Draggable Options

I’ve covered the most important options for Draggable, but there are others you might find handy as well

The constraint Option

"horizontal"limits the draggable to horizontal movement only; setting it to "vertical" limits it to vertical movement only By default, this option is not set This option is typi-cally used by sortables to enforce linear ordering of items

The ghosting Option

set to false, which is the default, dragging an element moves the element itself When it

Trang 4

is set to true, dragging an element copies the element and moves the copy At the end of

the drag operation, this “ghost” element will be removed (but not before reverting to its

original spot, if it needs to)

I can think of two common scenarios in which ghostingshould be enabled One is

when the drag implies duplicating an item, rather than moving it (i.e., the original item

will remain when the drag is done) The other is when the tentativeness of the drag

oper-ation needs to be emphasized For instance, think of the Finder or Windows Explorer;

files are ghosted upon drag because the drop could fail for a number of reasons Perhaps

the destination is read-only, or perhaps there are file name conflicts at the destination

Instead of the file being visually removed from one space, it remains there until the OS

can be sure it can move the file to the destination folder

The zindex Option

script.aculo.us sets a default CSS z-indexvalue of 1000on the dragged element; in most

cases, this is a high enough value that the draggable will appear above everything else on

the page If your web app defines z-indexvalues higher than 1000, you should use the

Start, End, and Revert Effects

By default, an element that’s being dragged becomes translucent, as you may have

noticed This is the draggable’s start effect The opacity change is a common pattern to

signify something is being moved—both Windows Explorer and Mac OS X’s Finder

employ it—but this effect can be customized if need be

To override the start effect, set the starteffectparameter to a function that takes

an element as its first argument That function will be called any time a drag starts

new Droppable('foo', {

starteffect: function(element) {

element.morph("background-color: #090");

}

});

This should remind you of the callback pattern you’ve encountered already—most

recently in Chapter 10 in the discussion on effects

There are two other kinds of effects: the end effect and the revert effect The end

effect, of course, is called when the drag ends—when the user releases the mouse and

“drops” the draggable The revert effect is called when a draggable reverts to its original

location; keep in mind that the revertoption must be set to truefor this effect to play

Trang 5

Exploring Droppables

The counterpart to Draggable,Droppablesis the object that manages all draggable-friendly containers When an element is made a droppable, it listens for mouseover events to determine when an element is being dragged into it Then it negotiates with the given draggable to determine if they’re compatible

Making Droppables

The interface to Droppablesis a bit different from that of Draggable It’s not a class, so you don’t declare instances of it Instead, you use the Droppables.addmethod:

Droppables.add('some_element', options);

To illustrate, let’s add a new ulto our page It will be empty at first, but will accept any lithat’s dragged into it (Note that we’ve removed the handles we added in the previ-ous exercise.)

<li id="item_1">Lorem</li>

<li id="item_2">Ipsum</li>

<li id="item_3">Dolor</li>

</ul>

<ul id="drop_zone"></ul>

Let’s also style the two containers so that we can clearly see their boundaries We’ll also float them to the left so that they appear side by side rather than stacked

#container, #drop_zone {

width: 200px;

height: 300px;

list-style-type: none;

margin-left: 0;

margin-right: 20px;

float: left;

padding: 0;

border: 2px dashed #999;

}

Trang 6

All this typing into the Firebug console is getting tedious, so let’s add some code to

document.observe("dom:loaded", function() {

new Draggable(li);

});

Droppables.add('drop_zone');

});

</script>

Here, we’re declaring our new ulas a droppable, but we’re not providing an options

argument By default, this droppable will “accept” any draggable that is dropped onto it

Reload the page and drag an item from the left box to the right box Nothing

hap-pens You can drag the list items wherever you like, but you could do that already

Don’t worry, this is by design script.aculo.us does not make any assumptions about

the purpose of the drag/drop operation, so it will only do what you tell it to do.

Using Callbacks for Droppables

There are two callbacks for droppables: onHoverand onDrop When a draggable is dragged

over a compatible droppable (i.e., a droppable that would accept it), the onHovercallback

fires When it is dropped onto a droppable, the onDropcallback fires

To illustrate this in the simplest way possible, let’s add an onDropcallback to the

pre-ceding code:

Droppables.add('drop_zone', {

onDrop: function() { console.log("dropped!"); }

});

Now reload the page and try again Make sure the Console tab of Firebug is visible so

that you can see when messages are logged You should see something like Figure 11-3

Định dạng
Số trang	6
Dung lượng	161,35 KB