<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 We were able to use Sortable.create so effortlessly because our markup conformed to 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.create looks 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 unordered and ordered lists ( ul and ol). If your draggables are not going to be list items, you must specify the tag name. CHAPTER 11 ■ ENABLING DRAGGABLES, DROPPABLES, AND SORTABLES272 The only Option The only option is a string that, if set, represents a CSS class that all children must have 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 overlap option expects a string—either vertical or 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 containment option 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 scroll parameter, 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. We must pass window as the value of the scroll parameter: CHAPTER 11 ■ ENABLING DRAGGABLES, DROPPABLES, AND SORTABLES 273 <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. Because any container can have scrollbars (as determined by its CSS overflow prop- erty), any container can be used as the value of scroll. For instance, we can tweak our CSS to make our ul container much smaller: #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! CHAPTER 11 ■ ENABLING DRAGGABLES, DROPPABLES, AND SORTABLES274 Figure 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 tools. Draggable and Droppables are low-level tools—middleware for the sorts of places 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. CHAPTER 11 ■ ENABLING DRAGGABLES, DROPPABLES, AND SORTABLES 275 Advanced Controls: Autocompleters, In-Place Editors, and Sliders In the last chapter, we discussed two types of controls provided by script.aculo.us: low- level controls (like drag-and-drop and effects) and high-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 Autocompleter is 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 control of the suggestion list. It does so by augmenting an ordinary text box (an input with a type of text) with an element for displaying the results (typically a div with a ul 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 ordinary controls provided by HTML, which would you choose? 277 CHAPTER 12 The 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. Autocompleter degrades 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 and foremost. If you can’t decide whether to use an autocompleter or a select element, 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. Create a new folder called chapter12 and add an index.html file from the standard template. To start off, we’ll need only two elements inside the body of the page: the text 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 <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> CHAPTER 12 ■ ADVANCED CONTROLS: AUTOCOMPLETERS, IN-PLACE EDITORS, AND SLIDERS278 . 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. learned that script .aculo. us contains both high-level and low-level tools. Draggable and Droppables are low-level tools—middleware for the sorts of places where you’d use drag -and- drop in your. 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