Drag and Drop Lists

This javascript code can be used to rearrange the contents of one or more lists, by drag and drop:

  • List item one
  • List item two
  • List item three
  • List item four
  • List item five
  • List item six
  • List item seven
  • List item eight
  • List item nine
  • List item ten
  • List item eleven

Installation is simple, just create a new DragDropList and add each list to it. They don't necessarily have to be HTML ULs or OLs, this code will work with just about any HTML elements. Download the associated files here.

<ul id="list1"><li>List item one</li> ... </ul>
<ul id="list2"><li>List item five</li> ... </ul>

<script type="text/javascript" src="dragdrop.js"></script>
<script type="text/javascript" src="dragdroplist.js"></script>
<script type="text/javascript"><!--

var ddl = new DragDropList ();
ddl.addList (document.getElementById ('list1'));
ddl.addList (document.getElementById ('list2'));

//--></script>

Creative Commons LicenseDrag and Drop Lists by Geoff Lankow is licensed
under a Creative Commons Attribution 3.0 License.