Random Ajax
Various Tidbits of Ajax from Website Style

Drag 'n Drop Lists

What do you need?

In order to use the functionality on the pages you need a few javascript files. You can download those files from Script.aculo.us Each of your pages that will use Ajax should reference at least the prototype.js and the scriptaculous.js files. To fully understand how to use the files, you should look at this usage page.

Put 'em in Order

This is a great little way to add a touch of functionality to some normal lists. You can sort both of the following lists within each list, but you can also move things from one list to the other. Try moving them in order of your movie preferences.

See Behind:

<div style="height:150px;">
<div style="float:left;">
<h5>The First List</h5>
 <ul class="sortablelist" id="firstlist" style="height:100px;width:200px;">
   <li class="one" id="themask">The Mask (List1/Item1)</li>
   <li class="one" id="spiderman">Spiderman (List1/Item2)</li>
   <li class="one" id="elf">Elf (List1/Item3)</li>
 </ul>
</div>
<div style="float:left; padding-left:2%;">
 <h5>Second List (drag using the arrow)</h5>
 <ul class="sortablelist" id="secondlist" style="height:100px;width:200px;">
   <li class="two" id="braveheart"><span class="handle">--&gt;</span> Braveheart (List2/Item1)
   </li>
   <li class="two" id="gladiator"><span class="handle">--&gt;</span> Gladiator (List2/Item2)
   </li>
   <li class="two" id="troy"><span class="handle">--&gt;</span> Troy (List2/Item3)
   </li>
</ul>
</div>
</div>
  <script type="text/javascript">
 // <![CDATA[
   Sortable.create("firstlist",
     {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false});
   Sortable.create("secondlist",
     {dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist"],constraint:false});
 // ]]>
 </script>

What To Note

Extra Things:
The classes sortablelist, one, two, and handle are merely formatting.
The id's set to the movie names are merely extra info that could later be pulled from another script to output what the selected order was (they are not required for this to work).
Required:
The id=firstlist and id=secondlist in each ul is what is actually being used to reference.
Obviously the script under the lists is required. Plus the javascripts indicated at the top of the page that hold general scripting info and can be used for your whole site.

Compatibility

This has been tested and works in Internet Explorer, Firefox, and Opera. The script is not shown to people who have javascript disabled. If you find any problems with another browser, please email me and let me know. Email TxNicole AT Gmail DOT com