Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > insights

Drag & Drop Table Columns (new version, explained)

  #1  
Old December 19th, 2007, 01:55 PM
Member
  
Join Date: Nov 2006
Posts: 53
Greetings,

I´m back here to show the new version of the drag & drop table columns (original script ). I´ve found some issues with the old script, specially when trying to use 2 tables with drag&drop on the same page (which was not possible). Now i´ve a new concept of the script, more object oriented.

I´ve also commented the whole code so you guys can easier understand it engine.

What exactly we need when trying to make a column drag & drop? We need basically 3 things

1 - we click on a determined handler, at this time we need a function to store the original position/object to know what to move
2 - we choose a destionation and release the mouse button, at this time we need a script to find the position where to drop the element we had dragged
3 - now that we have the element we dragged, and its destination, we need a function to put that element in the new position

Great part of the code is there because of the visual effect (like creating a hover effect to show where the element will be dropped, creating a "copy" of the column that is being dragged, etc)

Here is the new code


Expand|Select|Wrap|Line Numbers
  1. /*
  2.     Author: Romulo do Nascimento Ferreira
  3.     E-mail: romulo.nf@mgmail.com
  4.  
  5.     Drag & Drop Table Columns
  6. */
  7.  
  8.  
  9. /* parameters
  10.  
  11.     id: id of the table that will have drag & drop function
  12.  
  13. */
  14.  
  15. function dragTable(id) {
  16. // store the cell that will be dragged
  17. this.draggedCell = null
  18. // true if ghostTd exists
  19. this.ghostCreated = false
  20. // store the table itselfs
  21. this.table = document.getElementById(id)
  22. // store every row of the table
  23. this.tableRows = this.table.getElementsByTagName("tr")
  24. // create a handler array, usualy the ths in the thead, if not possible the first row of tds
  25. this.handler = this.table.getElementsByTagName("th").length > 0 ? this.table.getElementsByTagName("th") : this.table.tBodies[0].rows[0].getElementsByTagName("td")
  26. // create a cell array
  27. this.cells = this.table.getElementsByTagName("td")
  28. // store the max index of the column when dropped
  29. this.maxIndex = this.handler.length
  30. // store the horizontal mouse position
  31. this.x;
  32. // store the vertical mouse position
  33. this.y;
  34. // store the index of the column that will be dragged
  35. this.oldIndex;
  36. // store the index of the destionation of the column
  37. this.newIndex;
  38.  
  39.     for (x=0; x<this.handler.length; x++) {
  40.     // associate the object with the cells
  41.     this.handler[x].dragObj = this
  42.     // override the default action when mousedown and dragging
  43.     this.handler[x].onselectstart = function() { return false }
  44.     // fire the drag action and return false to prevent default action of selecting the text
  45.     this.handler[x].onmousedown = function(e) { this.dragObj.drag(this,e); return false }
  46.     // visual effect
  47.     this.handler[x].onmouseover = function(e) { this.dragObj.dragEffect(this,e) }
  48.     this.handler[x].onmouseout = function(e) { this.dragObj.dragEffect(this,e) }
  49.     this.handler[x].onmouseup = function(e) { this.dragObj.dragEffect(this,e) }
  50.     }
  51.  
  52.     for (x=0; x<this.cells.length; x++) {
  53.     this.cells[x].dragObj = this
  54.     // visual effect
  55.     this.cells[x].onmouseover = function(e) { this.dragObj.dragEffect(this,e) }
  56.     this.cells[x].onmouseout = function(e) { this.dragObj.dragEffect(this,e) }
  57.     this.cells[x].onmouseup = function(e) { this.dragObj.dragEffect(this,e) }
  58.     }
  59. }
  60.  
  61. dragTable.prototype.dragEffect = function(cell,e) {
  62. // assign event to variable e
  63. if (!e) e = window.event
  64.  
  65.     // return if the cell being hovered is the same as the one being dragged
  66.     if (cell.cellIndex == this.oldIndex) return
  67.  
  68.     else {
  69.         // if there is a cell being dragged
  70.         if (this.draggedCell) {
  71.         // change class to give a visual effect
  72.         e.type == "mouseover" ? this.handler[cell.cellIndex].className = "hovering" : this.handler[cell.cellIndex].className = ""
  73.         }
  74.     }
  75. }
  76.  
  77. dragTable.prototype.drag = function(cell,e) {
  78. // reference of the cell that is being dragged
  79. this.draggedCell = cell
  80.  
  81. // change class for visual effect
  82. this.draggedCell.className = "dragging"
  83.  
  84. // store the index of the cell that is being dragged
  85. this.oldIndex = cell.cellIndex
  86.  
  87. // create the ghost td
  88. this.createGhostTd(e)
  89. // start the engine
  90. this.dragEngine(true)
  91. }
  92.  
  93. dragTable.prototype.createGhostTd = function(e) {
  94. // if ghost exists return
  95. if (this.ghostCreated) return
  96. // assign event to variable e
  97. if (!e) e = window.event
  98. // horizontal position
  99. this.x = e.pageX ? e.pageX : e.clientX + document.documentElement.scrollLeft
  100. // vertical position
  101. this.y = e.pageY ? e.pageY : e.clientY + document.documentElement.scrollTop
  102.  
  103.     // create the ghost td (visual effect)
  104.     this.ghostTd = document.createElement("div")
  105.     this.ghostTd.className = "ghostTd"
  106.     this.ghostTd.style.top = this.y + 5 + "px"
  107.     this.ghostTd.style.left = this.x + 10 + "px"
  108.     // ghost td receives the content of the dragged cell
  109.     this.ghostTd.innerHTML = this.handler[this.oldIndex].innerHTML
  110.     document.getElementsByTagName("body")[0].appendChild(this.ghostTd)
  111.  
  112. // assign a flag to see if ghost is created
  113. this.ghostCreated = true
  114. }
  115.  
  116. dragTable.prototype.drop = function(dragObj,e) {
  117. // assign event to variable e
  118. if (!e) e = window.event
  119. // store the target of the event - mouseup
  120. e.targElm = e.target ? e.target : e.srcElement
  121.  
  122. // end the engine
  123. dragObj.dragEngine(false,dragObj)
  124.  
  125. // remove the ghostTd
  126. dragObj.ghostTd.parentNode.removeChild(dragObj.ghostTd)
  127.  
  128. // remove ghost created flag
  129. this.ghostCreated = false
  130.  
  131.     // store the index of the target, if it have one
  132.     if (e.targElm.cellIndex !="undefined") {
  133.     checkTable = e.targElm
  134.  
  135.         // ascend in the dom beggining in the targeted element and ending in a table or the body tag
  136.         while (checkTable.tagName.toLowerCase() !="table") {
  137.         if (checkTable.tagName.toLowerCase() == "html") break
  138.         checkTable = checkTable.parentNode
  139.         }
  140.  
  141.         // check if the table where the column was dropped is equal to the object table
  142.         checkTable == this.table ? this.newIndex = e.targElm.cellIndex : false
  143.     }
  144.  
  145. // start the function to sort the column
  146. dragObj.sortColumn(this.oldIndex,this.newIndex)
  147.  
  148. // remove visual effect from column being dragged
  149. this.draggedCell.className = ""
  150. // clear the variable
  151. this.draggedCell = null
  152. }
  153.  
  154. dragTable.prototype.sortColumn = function(o,d) {
  155. // returns if destionation dont have a valid index
  156. if (d == null) return
  157. // returns if origin is equals to the destination
  158. if (o == d) return
  159.  
  160.     // loop through every row
  161.     for (x=0; x<this.tableRows.length; x++) {
  162.         // array with the cells of the row x
  163.         tds = this.tableRows[x].cells
  164.         // remove this cell from the row
  165.         var cell = this.tableRows[x].removeChild(tds[o])
  166.         // insert the cell in the new index
  167.         if (d + 1 >= this.maxIndex) {
  168.         this.tableRows[x].appendChild(cell)
  169.         }
  170.         else {
  171.         this.tableRows[x].insertBefore(cell, tds[d])
  172.         }
  173.     }
  174. }
  175.  
  176. dragTable.prototype.dragEngine = function(boolean,dragObj) {
  177. var _this = this
  178. // fire the drop function
  179. document.documentElement.onmouseup = boolean ? function(e) { _this.drop(_this,e) } : null
  180. // capture the mouse coords
  181. document.documentElement.onmousemove = boolean ? function(e) { _this.getCoords(_this,e) } : null
  182. }
  183.  
  184. dragTable.prototype.getCoords = function(dragObj,e) {
  185. if (!e) e = window.event
  186.  
  187. // horizontal position
  188. dragObj.x = e.pageX ? e.pageX : e.clientX + document.documentElement.scrollLeft
  189. // vertical position
  190. dragObj.y = e.pageY ? e.pageY : e.clientY + document.documentElement.scrollTop
  191.  
  192.     if (dragObj.ghostTd) {
  193.     // make the ghostTd follow the mouse
  194.     dragObj.ghostTd.style.top = dragObj.y + 5 + "px"
  195.     dragObj.ghostTd.style.left = dragObj.x + 10 + "px"
  196.     }
  197. }
  198.  
Expand|Select|Wrap|Line Numbers
  1. table {border-collapse:collapse; table-layout:fixed; width:800px; font:normal 11px arial; border:1px solid #aaa}
  2. table thead th {background:#aaa; color:#fff; border:1px solid #000; cursor:pointer}
  3. table tbody td {text-indent:5px; border:1px solid #aaa;}
  4.  
  5. .ghostTd {width:auto; height:auto; padding:2px 8px; border:1px solid #000; position:absolute; font:normal 10px arial; background:#eee;}
  6. .dragging {background:#eee; color:#000}
  7. .hovering {background:#ccc; color:#555}
  8.  
  9.  
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html>
  5. <head>
  6.  
  7. <title>Drag N' Drop Table Columns</title>
  8.  
  9. <script src="dragndrop.js"></script>
  10.  
  11. <link rel="stylesheet" href="dragndrop.css">
  12.  
  13. <script>
  14. // init the script
  15. window.onload = function() {
  16. // create a variable for the object
  17. t1 = new dragTable('tableOne')
  18. }
  19. </script>
  20.  
  21. </head>
  22.  
  23. <body>
  24.  
  25. <table id="tableOne">
  26.     <thead>
  27.         <tr>
  28.             <th>HEADER 1</th>
  29.             <th>HEADER 2</th>
  30.             <th>HEADER 3</th>
  31.             <th>HEADER 4</th>
  32.             <th>HEADER 5</th>
  33.             <th>HEADER 6</th>
  34.             <th>HEADER 7</th>
  35.             <th>HEADER 8</th>
  36.             <th>HEADER 9</th>
  37.             <th>HEADER 10</th>
  38.         </tr>
  39.     </thead>
  40.     <tbody>
  41.         <tr>
  42.             <td>Dummy 1</td>
  43.             <td>Dummy 2</td>
  44.             <td>Dummy 3</td>
  45.             <td>Dummy 4</td>
  46.             <td>Dummy 5</td>
  47.             <td>Dummy 6</td>
  48.             <td>Dummy 7</td>
  49.             <td>Dummy 8</td>
  50.             <td>Dummy 9</td>
  51.             <td>Dummy 10</td>
  52.         </tr>
  53.         <tr>
  54.             <td>Dummy 1</td>
  55.             <td>Dummy 2</td>
  56.             <td>Dummy 3</td>
  57.             <td>Dummy 4</td>
  58.             <td>Dummy 5</td>
  59.             <td>Dummy 6</td>
  60.             <td>Dummy 7</td>
  61.             <td>Dummy 8</td>
  62.             <td>Dummy 9</td>
  63.             <td>Dummy 10</td>
  64.         </tr>
  65.         <tr>
  66.             <td>Dummy 1</td>
  67.             <td>Dummy 2</td>
  68.             <td>Dummy 3</td>
  69.             <td>Dummy 4</td>
  70.             <td>Dummy 5</td>
  71.             <td>Dummy 6</td>
  72.             <td>Dummy 7</td>
  73.             <td>Dummy 8</td>
  74.             <td>Dummy 9</td>
  75.             <td>Dummy 10</td>
  76.         </tr>
  77.         <tr>
  78.             <td>Dummy 1</td>
  79.             <td>Dummy 2</td>
  80.             <td>Dummy 3</td>
  81.             <td>Dummy 4</td>
  82.             <td>Dummy 5</td>
  83.             <td>Dummy 6</td>
  84.             <td>Dummy 7</td>
  85.             <td>Dummy 8</td>
  86.             <td>Dummy 9</td>
  87.             <td>Dummy 10</td>
  88.         </tr>
  89.         <tr>
  90.             <td>Dummy 1</td>
  91.             <td>Dummy 2</td>
  92.             <td>Dummy 3</td>
  93.             <td>Dummy 4</td>
  94.             <td>Dummy 5</td>
  95.             <td>Dummy 6</td>
  96.             <td>Dummy 7</td>
  97.             <td>Dummy 8</td>
  98.             <td>Dummy 9</td>
  99.             <td>Dummy 10</td>
  100.         </tr>
  101.         <tr>
  102.             <td>Dummy 1</td>
  103.             <td>Dummy 2</td>
  104.             <td>Dummy 3</td>
  105.             <td>Dummy 4</td>
  106.             <td>Dummy 5</td>
  107.             <td>Dummy 6</td>
  108.             <td>Dummy 7</td>
  109.             <td>Dummy 8</td>
  110.             <td>Dummy 9</td>
  111.             <td>Dummy 10</td>
  112.         </tr>
  113.         <tr>
  114.             <td>Dummy 1</td>
  115.             <td>Dummy 2</td>
  116.             <td>Dummy 3</td>
  117.             <td>Dummy 4</td>
  118.             <td>Dummy 5</td>
  119.             <td>Dummy 6</td>
  120.             <td>Dummy 7</td>
  121.             <td>Dummy 8</td>
  122.             <td>Dummy 9</td>
  123.             <td>Dummy 10</td>
  124.         </tr>
  125.         <tr>
  126.             <td>Dummy 1</td>
  127.             <td>Dummy 2</td>
  128.             <td>Dummy 3</td>
  129.             <td>Dummy 4</td>
  130.             <td>Dummy 5</td>
  131.             <td>Dummy 6</td>
  132.             <td>Dummy 7</td>
  133.             <td>Dummy 8</td>
  134.             <td>Dummy 9</td>
  135.             <td>Dummy 10</td>
  136.         </tr>
  137.         <tr>
  138.             <td>Dummy 1</td>
  139.             <td>Dummy 2</td>
  140.             <td>Dummy 3</td>
  141.             <td>Dummy 4</td>
  142.             <td>Dummy 5</td>
  143.             <td>Dummy 6</td>
  144.             <td>Dummy 7</td>
  145.             <td>Dummy 8</td>
  146.             <td>Dummy 9</td>
  147.             <td>Dummy 10</td>
  148.         </tr>
  149.     </tbody>
  150. </table>
  151.  
  152. </body>
  153. </html>
  154.  
  155.  
To init the script, call the dragTable function and pass the id of the table as a parameter. Ex:
t1 = new dragTable('tableOne')

Where t1 will be our reference to the table object

The attachment is a sample page with a table using the drag&drop column script

Any question, comment, sugestion, etc, use the email in the script
Feel free to use and modify the script according to your needs
Just keep the credits there :)

Good luck



  #2  
Old December 31st, 2007, 01:33 PM
Newbie
  
Join Date: Dec 2007
Posts: 1

re: Drag & Drop Table Columns (new version, explained)

I tried using your code as is i.e I organised the code in the following way:

//dragndrop.css

Expand|Select|Wrap|Line Numbers
  1. table {border-collapse:collapse; table-layout:fixed; width:800px; font:normal 11px arial; border:1px solid #aaa}
  2. table thead th {background:#aaa; color:#fff; border:1px solid #000; cursor:pointer}
  3. table tbody td {text-indent:5px; border:1px solid #aaa;}
  4.  
  5. .ghostTd {width:auto; height:auto; padding:2px 8px; border:1px solid #000; position:absolute; font:normal 10px arial; background:#eee;}
  6. .dragging {background:#eee; color:#000}
  7. .hovering {background:#ccc; color:#555}
  8.  
------------------------------------------------------------------
//dragndrop.js

Expand|Select|Wrap|Line Numbers
  1. /*
  2.     Author: Romulo do Nascimento Ferreira
  3.     E-mail: romulo.nf@mgmail.com
  4.  
  5.     Drag & Drop Table Columns
  6. */
  7.  
  8.  
  9. /* parameters
  10.  
  11.     id: id of the table that will have drag & drop function
  12.  
  13. */
  14.  
  15. function dragTable(id) {
  16. // store the cell that will be dragged
  17. this.draggedCell = null
  18. // true if ghostTd exists
  19. this.ghostCreated = false
  20. // store the table itselfs
  21. this.table = document.getElementById(id)
  22. // store every row of the table
  23. this.tableRows = this.table.getElementsByTagName("tr")
  24. // create a handler array, usualy the ths in the thead, if not possible the first row of tds
  25. this.handler = this.table.getElementsByTagName("th").length > 0 ? this.table.getElementsByTagName("th") : this.table.tBodies[0].rows[0].getElementsByTagName("td")
  26. // create a cell array
  27. this.cells = this.table.getElementsByTagName("td")
  28. // store the max index of the column when dropped
  29. this.maxIndex = this.handler.length
  30. // store the horizontal mouse position
  31. this.x;
  32. // store the vertical mouse position
  33. this.y;
  34. // store the index of the column that will be dragged
  35. this.oldIndex;
  36. // store the index of the destionation of the column
  37. this.newIndex;
  38.  
  39.     for (x=0; x<this.handler.length; x++) {
  40.     // associate the object with the cells
  41.     this.handler[x].dragObj = this
  42.     // override the default action when mousedown and dragging
  43.     this.handler[x].onselectstart = function() { return false }
  44.     // fire the drag action and return false to prevent default action of selecting the text
  45.     this.handler[x].onmousedown = function(e) { this.dragObj.drag(this,e); return false }
  46.     // visual effect
  47.     this.handler[x].onmouseover = function(e) { this.dragObj.dragEffect(this,e) }
  48.     this.handler[x].onmouseout = function(e) { this.dragObj.dragEffect(this,e) }
  49.     this.handler[x].onmouseup = function(e) { this.dragObj.dragEffect(this,e) }
  50.     }
  51.  
  52.     for (x=0; x<this.cells.length; x++) {
  53.     this.cells[x].dragObj = this
  54.     // visual effect
  55.     this.cells[x].onmouseover = function(e) { this.dragObj.dragEffect(this,e) }
  56.     this.cells[x].onmouseout = function(e) { this.dragObj.dragEffect(this,e) }
  57.     this.cells[x].onmouseup = function(e) { this.dragObj.dragEffect(this,e) }
  58.     }
  59. }
  60.  
  61. dragTable.prototype.dragEffect = function(cell,e) {
  62. // assign event to variable e
  63. if (!e) e = window.event
  64.  
  65.     // return if the cell being hovered is the same as the one being dragged
  66.     if (cell.cellIndex == this.oldIndex) return
  67.  
  68.     else {
  69.         // if there is a cell being dragged
  70.         if (this.draggedCell) {
  71.         // change class to give a visual effect
  72.         e.type == "mouseover" ? this.handler[cell.cellIndex].className = "hovering" : this.handler[cell.cellIndex].className = ""
  73.         }
  74.     }
  75. }
  76.  
  77. dragTable.prototype.drag = function(cell,e) {
  78. // reference of the cell that is being dragged
  79. this.draggedCell = cell
  80.  
  81. // change class for visual effect
  82. this.draggedCell.className = "dragging"
  83.  
  84. // store the index of the cell that is being dragged
  85. this.oldIndex = cell.cellIndex
  86.  
  87. // create the ghost td
  88. this.createGhostTd(e)
  89. // start the engine
  90. this.dragEngine(true)
  91. }
  92.  
  93. dragTable.prototype.createGhostTd = function(e) {
  94. // if ghost exists return
  95. if (this.ghostCreated) return
  96. // assign event to variable e
  97. if (!e) e = window.event
  98. // horizontal position
  99. this.x = e.pageX ? e.pageX : e.clientX + document.documentElement.scrollLeft
  100. // vertical position
  101. this.y = e.pageY ? e.pageY : e.clientY + document.documentElement.scrollTop
  102.  
  103.     // create the ghost td (visual effect)
  104.     this.ghostTd = document.createElement("div")
  105.     this.ghostTd.className = "ghostTd"
  106.     this.ghostTd.style.top = this.y + 5 + "px"
  107.     this.ghostTd.style.left = this.x + 10 + "px"
  108.     // ghost td receives the content of the dragged cell
  109.     this.ghostTd.innerHTML = this.handler[this.oldIndex].innerHTML
  110.     document.getElementsByTagName("body")[0].appendChild(this.ghostTd)
  111.  
  112. // assign a flag to see if ghost is created
  113. this.ghostCreated = true
  114. }
  115.  
  116. dragTable.prototype.drop = function(dragObj,e) {
  117. // assign event to variable e
  118. if (!e) e = window.event
  119. // store the target of the event - mouseup
  120. e.targElm = e.target ? e.target : e.srcElement
  121.  
  122. // end the engine
  123. dragObj.dragEngine(false,dragObj)
  124.  
  125. // remove the ghostTd
  126. dragObj.ghostTd.parentNode.removeChild(dragObj.gho  stTd)
  127.  
  128. // remove ghost created flag
  129. this.ghostCreated = false
  130.  
  131.     // store the index of the target, if it have one
  132.     if (e.targElm.cellIndex !="undefined") {
  133.     checkTable = e.targElm
  134.  
  135.         // ascend in the dom beggining in the targeted element and ending in a table or the body tag
  136.         while (checkTable.tagName.toLowerCase() !="table") {
  137.         if (checkTable.tagName.toLowerCase() == "html") break
  138.         checkTable = checkTable.parentNode
  139.         }
  140.  
  141.         // check if the table where the column was dropped is equal to the object table
  142.         checkTable == this.table ? this.newIndex = e.targElm.cellIndex : false
  143.     }
  144.  
  145. // start the function to sort the column
  146. dragObj.sortColumn(this.oldIndex,this.newIndex)
  147.  
  148. // remove visual effect from column being dragged
  149. this.draggedCell.className = ""
  150. // clear the variable
  151. this.draggedCell = null
  152. }
  153.  
  154. dragTable.prototype.sortColumn = function(o,d) {
  155. // returns if destionation dont have a valid index
  156. if (d == null) return
  157. // returns if origin is equals to the destination
  158. if (o == d) return
  159.  
  160.     // loop through every row
  161.     for (x=0; x<this.tableRows.length; x++) {
  162.         // array with the cells of the row x
  163.         tds = this.tableRows[x].cells
  164.         // remove this cell from the row
  165.         var cell = this.tableRows[x].removeChild(tds[o])
  166.         // insert the cell in the new index
  167.         if (d + 1 >= this.maxIndex) {
  168.         this.tableRows[x].appendChild(cell)
  169.         }
  170.         else {
  171.         this.tableRows[x].insertBefore(cell, tds[d])
  172.         }
  173.     }
  174. }
  175.  
  176. dragTable.prototype.dragEngine = function(boolean,dragObj) {
  177. var _this = this
  178. // fire the drop function
  179. document.documentElement.onmouseup = boolean ? function(e) { _this.drop(_this,e) } : null
  180. // capture the mouse coords
  181. document.documentElement.onmousemove = boolean ? function(e) { _this.getCoords(_this,e) } : null
  182. }
  183.  
  184. dragTable.prototype.getCoords = function(dragObj,e) {
  185. if (!e) e = window.event
  186.  
  187. // horizontal position
  188. dragObj.x = e.pageX ? e.pageX : e.clientX + document.documentElement.scrollLeft
  189. // vertical position
  190. dragObj.y = e.pageY ? e.pageY : e.clientY + document.documentElement.scrollTop
  191.  
  192.     if (dragObj.ghostTd) {
  193.     // make the ghostTd follow the mouse
  194.     dragObj.ghostTd.style.top = dragObj.y + 5 + "px"
  195.     dragObj.ghostTd.style.left = dragObj.x + 10 + "px"
  196.     }
  197. }
  198.  
-------------------------------------------------------------
//dragndrop.htm

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html>
  5. <head>
  6.  
  7. <title>Drag N' Drop Table Columns</title>
  8.  
  9. <script src="dragndrop.js"></script>
  10.  
  11. <link rel="stylesheet" href="dragndrop.css">
  12.  
  13. <script>
  14. // init the script
  15. window.onload = function() {
  16. // create a variable for the object
  17. t1 = new dragTable('tableOne')
  18. }
  19. </script>
  20.  
  21. </head>
  22.  
  23. <body>
  24.  
  25. <table id="tableOne">
  26.     <thead>
  27.         <tr>
  28.             <th>HEADER 1</th>
  29.             <th>HEADER 2</th>
  30.             <th>HEADER 3</th>
  31.             <th>HEADER 4</th>
  32.             <th>HEADER 5</th>
  33.             <th>HEADER 6</th>
  34.             <th>HEADER 7</th>
  35.             <th>HEADER 8</th>
  36.             <th>HEADER 9</th>
  37.             <th>HEADER 10</th>
  38.         </tr>
  39.     </thead>
  40.     <tbody>
  41.         <tr>
  42.             <td>Dummy 1</td>
  43.             <td>Dummy 2</td>
  44.             <td>Dummy 3</td>
  45.             <td>Dummy 4</td>
  46.             <td>Dummy 5</td>
  47.             <td>Dummy 6</td>
  48.             <td>Dummy 7</td>
  49.             <td>Dummy 8</td>
  50.             <td>Dummy 9</td>
  51.             <td>Dummy 10</td>
  52.         </tr>
  53.         <tr>
  54.             <td>Dummy 1</td>
  55.             <td>Dummy 2</td>
  56.             <td>Dummy 3</td>
  57.             <td>Dummy 4</td>
  58.             <td>Dummy 5</td>
  59.             <td>Dummy 6</td>
  60.             <td>Dummy 7</td>
  61.             <td>Dummy 8</td>
  62.             <td>Dummy 9</td>
  63.             <td>Dummy 10</td>
  64.         </tr>
  65.         <tr>
  66.             <td>Dummy 1</td>
  67.             <td>Dummy 2</td>
  68.             <td>Dummy 3</td>
  69.             <td>Dummy 4</td>
  70.             <td>Dummy 5</td>
  71.             <td>Dummy 6</td>
  72.             <td>Dummy 7</td>
  73.             <td>Dummy 8</td>
  74.             <td>Dummy 9</td>
  75.             <td>Dummy 10</td>
  76.         </tr>
  77.         <tr>
  78.             <td>Dummy 1</td>
  79.             <td>Dummy 2</td>
  80.             <td>Dummy 3</td>
  81.             <td>Dummy 4</td>
  82.             <td>Dummy 5</td>
  83.             <td>Dummy 6</td>
  84.             <td>Dummy 7</td>
  85.             <td>Dummy 8</td>
  86.             <td>Dummy 9</td>
  87.             <td>Dummy 10</td>
  88.         </tr>
  89.         <tr>
  90.             <td>Dummy 1</td>
  91.             <td>Dummy 2</td>
  92.             <td>Dummy 3</td>
  93.             <td>Dummy 4</td>
  94.             <td>Dummy 5</td>
  95.             <td>Dummy 6</td>
  96.             <td>Dummy 7</td>
  97.             <td>Dummy 8</td>
  98.             <td>Dummy 9</td>
  99.             <td>Dummy 10</td>
  100.         </tr>
  101.         <tr>
  102.             <td>Dummy 1</td>
  103.             <td>Dummy 2</td>
  104.             <td>Dummy 3</td>
  105.             <td>Dummy 4</td>
  106.             <td>Dummy 5</td>
  107.             <td>Dummy 6</td>
  108.             <td>Dummy 7</td>
  109.             <td>Dummy 8</td>
  110.             <td>Dummy 9</td>
  111.             <td>Dummy 10</td>
  112.         </tr>
  113.         <tr>
  114.             <td>Dummy 1</td>
  115.             <td>Dummy 2</td>
  116.             <td>Dummy 3</td>
  117.             <td>Dummy 4</td>
  118.             <td>Dummy 5</td>
  119.             <td>Dummy 6</td>
  120.             <td>Dummy 7</td>
  121.             <td>Dummy 8</td>
  122.             <td>Dummy 9</td>
  123.             <td>Dummy 10</td>
  124.         </tr>
  125.         <tr>
  126.             <td>Dummy 1</td>
  127.             <td>Dummy 2</td>
  128.             <td>Dummy 3</td>
  129.             <td>Dummy 4</td>
  130.             <td>Dummy 5</td>
  131.             <td>Dummy 6</td>
  132.             <td>Dummy 7</td>
  133.             <td>Dummy 8</td>
  134.             <td>Dummy 9</td>
  135.             <td>Dummy 10</td>
  136.         </tr>
  137.         <tr>
  138.             <td>Dummy 1</td>
  139.             <td>Dummy 2</td>
  140.             <td>Dummy 3</td>
  141.             <td>Dummy 4</td>
  142.             <td>Dummy 5</td>
  143.             <td>Dummy 6</td>
  144.             <td>Dummy 7</td>
  145.             <td>Dummy 8</td>
  146.             <td>Dummy 9</td>
  147.             <td>Dummy 10</td>
  148.         </tr>
  149.     </tbody>
  150. </table>
  151.  
  152. </body>
  153. </html>
  154.  
However when I open dragndrop.htm i get a javscript error stating
Line: 17
Char: 1
Error: 'dragTable' is undefined.
Code: 0

Do I need to take care of something else as well.

Regards,
Nitin
Last edited by acoder; December 31st, 2007 at 03:59 PM. Reason: Added code tags
  #3  
Old December 31st, 2007, 03:14 PM
Member
  
Join Date: Nov 2006
Posts: 53

re: Drag & Drop Table Columns (new version, explained)

Not really! All you need to use the script is:

- a table with standard markup (table, thead, tbody, tr, td, th)
- load the js into the page
- init the script using a onload event and passing the id of the table. i.e: dragTable(tableID)

Just make sure the js is being loaded and then call the function, everything should work fine

Good luck
  #4  
Old January 1st, 2008, 09:10 AM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,517

re: Drag & Drop Table Columns (new version, explained)

The most probable reason for this is the code tag bug on line 126 of the JavaScript code:
Expand|Select|Wrap|Line Numbers
  1. dragObj.ghostTd.parentNode.removeChild(dragObj.gho stTd)
Note spaces(s). Remove the space(s) to make it:
Expand|Select|Wrap|Line Numbers
  1. dragObj.ghostTd.parentNode.removeChild(dragObj.ghostTd)
Hopefully, that should fix it.

Edit: it even appears in one line of code! Argh! Well, just remove the space between 'o' and 's' in ghostTd.
  #5  
Old February 11th, 2008, 06:17 PM
Newbie
  
Join Date: Feb 2008
Posts: 1

re: Drag & Drop Table Columns (new version, explained)

after changing the 'gho stTd' to 'ghostTd' in line no 252 it is working perfectly. Great Script , keep going.............
Reply

« previous insight | next insight »

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 225,662 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved