Drag and drop libraries

Question

There are a lot of excellent drag and drop Javascript/DHTML libraries available out there.
http://script.aculo.us/
http://www.walterzorn.com/dragdrop/dragdrop_e.htm
http://www.youngpup.net/2001/domdrag/tutorial
http://tool-man.org/examples/sorting.html
The quality of the libraries is exceptional, very clean code, very re-usable, modular, object-oriented, follows Javascript best-practices. Above all, very easy to plug in to your own applications, regardless of the web development infrastructure used. Hats off to those Javascript wizards.
Maybe I am not creative enough, but other than the "Wow, cool" factor, what practical use is there for drag-and-drop in a real-world application that cannot be done using other, more traditional means?
[BTW, I searched a lot but couldnt really find any good examples of re-ordering table columns using drag and drop. Can someone point me to a few?]
A few uses I could think of (some of them already covered in the examples above) are
1. Re-ordering a list of things
2. Adding items to a shopping cart by dragging them into a cart icon
3. Deleting things by dragging them into a trashcan icon (like in Windows)
What else? It just seems like a answer looking for a question.
Comments welcome.
Thanks

Answer 1

Again, very easy.
Load the libraries in the page header
<script language="JavaScript" type="text/javascript" src="http://tool-man.org/source/org/tool-man/core.js"></script>
<script language="JavaScript" type="text/javascript" src="http://tool-man.org/source/org/tool-man/events.js"></script>
<script language="JavaScript" type="text/javascript" src="http://tool-man.org/source/org/tool-man/css.js"></script>
<script language="JavaScript" type="text/javascript" src="http://tool-man.org/source/org/tool-man/coordinates.js"></script>
<script language="JavaScript" type="text/javascript" src="http://tool-man.org/source/org/tool-man/drag.js"></script>
<script language="JavaScript" type="text/javascript" src="http://tool-man.org/source/org/tool-man/dragsort.js"></script>
<script language="JavaScript" type="text/javascript" src="http://tool-man.org/source/org/tool-man/cookies.js"></script>
<script type="text/javascript">
function verticalOnly(item)
item.toolManDragGroup.verticalOnly()
}Tim's library only had draggable lists (HTML UL tag), I had to modify it to add support for table rows/columns. Modify his makeListSortable method to add
                var isList = (list.nodeName=="UL")
                var isTable = (list.nodeName=="TABLE")
                var isCell  = (list.nodeName=="TH")
                if (isList) var items = list.getElementsByTagName("li")
                if (isTable) var items = list.getElementsByTagName("tr")
                if (isCell) var items = list.parentNode.getElementsByTagName("th")To make rows draggable, add the following in the report region footer
<script type="text/javascript">
var l_cell=document.getElementById('EMPNO')
var l_table=html_CascadeUpTill(l_cell,'TABLE')
var dragsort=ToolMan.dragsort()
dragsort.makeListSortable(l_table,verticalOnly)
</script>To make columns sortable is a little more involved since HTML table columns are not really a "node", they are a collection and each cell in the collection has to be moved.
Add the following to the page header
function va_GetCellIndex(p_cell)
  var table=html_CascadeUpTill(p_cell,'TABLE')
  var row=table.rows[0]
  var cells=row.cells
  var j=cells.length
  while (j--) if (cells[j]==p_cell) return j;
  return null;
function va_MoveBefore(item1,item2)
  var item1_idx=va_GetCellIndex(item1)
  var item2_idx=va_GetCellIndex(item2)
  var table=html_CascadeUpTill(item1,'TABLE')
  var j=table.rows.length;
  while (j--) {
     var row=table.rows[j];
     var x=row.removeChild(row.cells[item1_idx])
     row.insertBefore(x,row.cells[item2_idx])
ToolMan._helpers.moveBefore = function(item1,item2) {
  if (item1.nodeName == "TH") {
    va_MoveBefore(item1,item2)
    return
  var parent = item1.parentNode
  parent.removeChild(item1)
  parent.insertBefore(item1, item2)Finally, to make the columns draggable add the following to the region footer,
<script type="text/javascript">
var l_cell=document.getElementById('EMPNO')
var dragsort=ToolMan.dragsort()
dragsort.makeListSortable(l_cell)
</script>I also made the column headings show a different cursor to provide a visual cue that the columns can be dragged by adding this in the region header
<style type="text/css">
th.t10ReportHeader {
cursor:pointer;cursor:move;
</style>Hope this helps.