Reload this page, and you’ll find that the container is already behaving like a sortable.. The list items inside it can be dragged and reordered; when a dragged element gets near a new “
Trang 1<script type="text/javascript">
document.observe("dom:loaded", function() {
Sortable.create('container');
});
</script>
</head>
<body>
<ul id="container">
<li class="foo" id="item_1">Lorem</li>
<li class="foo" id="item_2">Ipsum</li>
<li class="foo" id="item_3">Dolor</li>
<li class="foo" id="item_4">Sit</li>
<li class="foo" id="item_5">Amet</li>
</ul>
</body>
</html>
Aside from the script element, the only change we’ve made is to remove the “drop zone” container, which we don’t need anymore
Reload this page, and you’ll find that the container is already behaving like a sortable The list items inside it can be dragged and reordered; when a dragged element gets near a new “slot,” the elements on either side part to give it room When dropped, the element stays in its new place
Sortable Options
many of its default options The more specialized the usage, however, the more configu-ration will be needed The following subsections describe some of the other options you might use with sortables
The tag Option
Sortable.createlooks for children of a certain tag name to declare as draggables This option, tag, is a string that refers to that tag name It defaults to li, the semantic child of
you must specify the tag name
Trang 2The only Option
in order to be treated like draggables This is a way to further winnow down the set of
draggables—for instance, if only certain children are eligible for reordering
The overlap Option
The overlapoption expects a string—either verticalor horizontal Vertical sortables are
the default; horizontal sortables can be created with a smack of CSS trickery and a grasp
of element floating rules
The containment Option
The containmentoption is tricky—it expects an array of element nodes (or strings that
refer to element IDs) If an array is given, sortables will be allowed to be dragged outside
of their parent, and can be dropped into any of the given elements Or, to be briefer, this
option allows for drag-and-drop between two sortables
The scroll Option
Picture your file manager of choice—Windows Explorer or Mac OS X’s Finder The visual
model for interacting with files is easy to learn: you can select a file, drag it into a folder,
and thus move the file into that directory as though you were filing real papers into a
folder
The model isn’t leak-proof, however An Explorer or Finder window can only show
so much at once; what happens if the file and the folder are far apart? Both of these file
managers solve the problem by trying to “sense” when the user wants to drag to
some-place out of view When the user moves the mouse near the edge of the viewport, it
starts inching in that direction, little by little (or sometimes lightning-fast, if your motor
skills aren’t too sharp) When the target folder is in view, the user moves toward it and
away from the edge of the viewport, and the scrolling stops
Sortables pose a similar problem, and script.aculo.us contains a similar solution
The scrollparameter, if set, will scroll the given container when an item is dragged
toward one of its edges
We can test this behavior on the window itself by resizing it to a very small height
C H A P T E R 1 1 ■ E N A B L I N G D R A G G A B L E S, D R O P PA B L E S, A N D S O RTA B L E S 273
Trang 3<script type="text/javascript">
document.observe("dom:loaded", function() {
Sortable.create('container', { scroll: window });
});
</script>
Reload the page and test the behavior yourself Notice in Figure 11-8 how the page scrolls smoothly when you drag an item to the bottom of the viewport
Figure 11-8.The window scrolls when an item is dragged near the top or bottom of the viewport.
prop-erty), any container can be used as the value of scroll For instance, we can tweak our CSS
#container {
width: 200px;
height: 100px;
overflow: auto;
list-style-type: none;
margin-left: 0;
margin-right: 20px;
float: left;
padding: 0;
border: 2px dashed #999;
}
As you can see in Figure 11-9, the sortable container itself scrolls when necessary Another UI innovation freed from the monopolistic clutches of the desktop!
Trang 4Figure 11-9.The scroll parameter works on all elements Here, the container scrolls when an
item is dragged near its top or bottom edge.
Summary
In this chapter, you learned that script.aculo.us contains both high-level and low-level
where you’d use drag-and-drop in your applications Sortable is a high-level tool—a
specific usage of drag-and-drop that is ready out of the box
The next chapter will deal with more high-level tools: UI goodies that solve very
spe-cific problems
C H A P T E R 1 1 ■ E N A B L I N G D R A G G A B L E S, D R O P PA B L E S, A N D S O RTA B L E S 275
Trang 5Advanced Controls:
Autocompleters,
In-Place Editors, and Sliders
low-level controls (like drag-and-drop and effects) and high-low-level controls (like sortables)
The former are building blocks for the latter
In this chapter, we’ll look at more of the high-level controls They’re UI widgets
tailored for specific use cases, so we’ll be discussing where to use them as well as how
to use them
Adding Autocomplete Functionality
Autocompleteris a control similar to the one built into browsers: when the user begins
to type in a text box, a menu appears below the text offering completion suggestions
All major web browsers use this type of UI control for their address bars—typing the
beginning of a URL will display a list of URLs in your history that begin with what you’ve
typed Most also use it on any input field you’ve typed text into before, although that
depends on whether you’ve configured your browser to remember those values
The script.aculo.us autocompleter replicates this control, but gives the developer
inside) and a listener on the text box that observes what’s being typed
When to Use Autocompleter
You can ask yourself one question to figure out whether an autocompleter is the right
solution in a certain place: would this degrade to a text box or a drop-down menu? In
other words, if you weren’t able to use an autocompleter and had to choose between the
Trang 6The difference between them, of course, is that a text box allows for free-form input, while a drop-down menu restricts input to whatever choices have been set in the HTML Autocompleterdegrades to an ordinary text box When JavaScript is turned off, it
behaves exactly like a text box.
Keep your eye on the usability ball—UI controls are meant to solve problems first
choose the latter Fight the urge to treat the autocompleter as if it were a flashier version
of the standard drop-down menu
Use Case: Suggesting Players
A fantasy football league has legions upon legions of players Many belong to a specific team in the league; many more are free agents, able to be picked up at any time They’re the leftovers, the players nobody picked in the fantasy draft
Every season, several no-name players break out, amassing yards and touchdowns
as they introduce themselves to a national audience A clever fantasy owner can spot these diamonds in the rough before anyone else if he pays attention to the numbers
box and the container to hold suggestions
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Chapter 12</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src=" /js/prototype.js" type="text/javascript"""></script>
<script src=" /js/scriptaculous.js" type="text/javascript"""></script>
</head>
<body>
<input type="text" name="player_name" id="player_name" size="30" />
<div id="player_suggestions"></div>
</body>
</html>
C H A P T E R 1 2 ■ A D VA N C E D C O N T R O L S : A U TO C O M P L E T E R S, I N - P L A C E E D I TO R S, A N D S L I D E R S
278