0

Drag - Drop Lists

Posted by admin - November 28, 2009

This code uses an open source drag - drop library from Tool-Man to create drag-drop lists. Download and unpack the drag-drop libraries onto your server.

Code:

<html>
 <head>
 <title>Drag - Drop Lists</title>

 <style>
 #cities li {margin:0px;}
 ul.box li {margin:3px;}
 ul.sortable li {position:relative;}
 ul.box
 {
  list-style-type:none;
  padding:0px;
  margin:2px;
  width:20em;
  font-size:13px;
  font-family:"Times New Roman", Times, serif;
 }
 ul.box li
 {
  cursor:move;
  padding:2px 2px;
  border:1px solid #cccccc;
  background:#eee;
 }
 .clickable a
 {
  display:block;
  text-decoration:none;
  cursor:pointer;
  cursor:hand;
 }
 clickable li:hover
 {
  background:#f6f6f6;
 }
 </style>

 <script type="text/javascript" src="source/org/tool-man/core.js"></script>
 <script type="text/javascript" src="source/org/tool-man/events.js"></script>
 <script type="text/javascript" src="source/org/tool-man/css.js"></script>
 <script type="text/javascript" src="source/org/tool-man/drag.js"></script>
 <script type="text/javascript" src="source/org/tool-man/coordinates.js"></script>
 <script type="text/javascript" src="source/org/tool-man/dragsort.js"></script>
 <script type="text/javascript" src="source/org/tool-man/cookies.js"></script> 

 <script type="text/javascript">
 <!--
 var dragsort = ToolMan.dragsort();
 var junkdrawer = ToolMan.junkdrawer();

 window.onLoad = function()
 {
   dragsort.makeListSortable(document.getElementById("cities"), verticalOnly, saveOrder);
 }

 function verticalOnly(item)
 {
   item.toolManDragGroup.verticalOnly();
 }

 function saveOrder(item) { }

 function prepFields()
 {
   document.getElementById("cities_txt").value = junkdrawer.
   serializeList(document.getElementById("cities"));
   return true;
 }
 //-->
 </script>
 </head>
 <body>
 <ul id="cities" class="box">
 <li>Paris</li>
 <li>Rome</li>
 <li>Athens</li>
 </ul>

 <form method="post" action="display.php">
 <input type="hidden" name="cities" value="" id="cities_txt" />
 <input type="submit" onclick="prepFields();" />
 </form>
 </body>
</html>

Save the code as dragdrop.html

The simple code below used to print out values from the list.

Code:

<html>
<body>
You chose: <?=$_POST['states']?>
</body>
</html>

Save the code as display.php.