Hack13.Create Drag-and-Drop Lists | PHP Hacks: Tips & Tools For Creating Dynamic Websites

Hack 13. Create Drag-and-Drop Lists

Use JavaScript, DHTML, and PHP to create and use drag-and-drop lists.

Creating an interface that allows the user to prioritize a list has always been a problem when working with HTML. With PHP, though, this is no longer the case. This hack uses an open source drag-and-drop library from ToolMan (http://tool-man.org/) to create drag-and-drop lists.

3.4.1. The Code

Enter the code shown in Example 3-3 and save it as index.html.

Example 3-3. Building a drag-and-drop list with HTML and CSS

 <html> <head> <style> #states li { margin: 0px; } ul.boxy li { margin: 3px; } ul.sortable li { position: relative; } ul.boxy { list-style-type: none; padding: 0px; margin: 2px; width: 20em; font-size: 13px; font-family: Arial, sans-serif; } ul.boxy li { cursor:move; padding: 2px 2px; border: 1px solid #ccc; background-color: #eee; } .clickable a {  display: block;  text-decoration: none;  cursor: pointer;  cursor: hand; } .clickable li:hover { background-color: #f6f6f6; } </style> <script language="JavaScript" type="text/javascript" src="/books/1/201/1/html/2/source/org/tool-man/core.js"></script> <script language="JavaScript" type="text/javascript" src="/books/1/201/1/html/2/source/org/tool-man/events.js"></script> <script language="JavaScript" type="text/javascript" src="/books/1/201/1/html/2/source/org/tool-man/css.js"></script> <script language="JavaScript" type="text/javascript" src="/books/1/201/1/html/2/source/org/tool-man/coordinates.js"></script> <script language="JavaScript" type="text/javascript" src="/books/1/201/1/html/2/source/org/tool-man/drag.js"></script> <script language="JavaScript" type="text/javascript" src="/books/1/201/1/html/2/source/org/tool-man/dragsort.js"></script> <script language="JavaScript" type="text/javascript" src="/books/1/201/1/html/2/source/org/tool-man/cookies.js"></script> <script language="JavaScript" type="text/javascript"> <!-- var dragsort = ToolMan.dragsort( ) var junkdrawer = ToolMan.junkdrawer( ) window.onload = function( ) { dragsort.makeListSortable(document.getElementById("states"), verticalOnly, saveOrder) } function verticalOnly(item) { item.toolManDragGroup.verticalOnly( ) } function saveOrder(item) { } function prepFields( ) { document.getElementById( "states_text" ).value = junkdrawer. serializeList( document.getElementById( "states" ) ); return true; } //--> </script> </head> <body> <ul  > <li>California</li> <li>Texas</li> <li>Alaska</li> </ul> <form method="post" action="tellme.php"> <input type="hidden" name="states" value=""  /> <input type="submit" onclick="return prepFields( );"> </form> </body> </html>

The simple code in Example 3-4saved as tellme.phpprints out values in an array.

Example 3-4. PHP used to print out some values from the list

 <body> <html> You chose: <?php echo( $_POST['states'] ); ?> </html> </body>

3.4.2. Running the Hack

Download and unpack the drag-and-drop libraries onto your web server. Then upload the files and navigate to the index.html page. You should see something that looks like Figure 3-4.

Figure 3-4. The drag-and-drop list

Now drag and drop the lines to rearrange the items however you like; then click the Submit button. At that point, the contents of the list will be transferred into a hidden form variable called states, and uploaded to the server. The tellme.php script then prints the values from that variable in the order you specified (as shown in Figure 3-5).

Figure 3-5. After clicking on the Submit button

Dynamic, little interface widgets such as this one can differentiate between your web application and others in terms of ease of use. And sometimes it's good having one just for a little perk during demos! With the results of a drag stored in a form variable, your PHP can easily retrieve the data and do anything you want it to do.

3.4.3. See Also

"Create Drop-Down Stickies" [Hack #16]
"Create Pop-Up Hints" [Hack #12]
"Build a Color Selector" [Hack #23]
"Create an Interactive Calendar" [Hack #25]