472,981 Members | 1,422 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 472,981 developers and data experts.

Drag & Drop Table Columns (new version, explained)

Greetings,

Im back here to show the new version of the drag & drop table columns (original script ). Ive 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 ive a new concept of the script, more object oriented.

Ive 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
Dec 19 '07 #1
5 13578
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
Dec 31 '07 #2
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
Dec 31 '07 #3
acoder
16,027 Expert Mod 8TB
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.
Jan 1 '08 #4
after changing the 'gho stTd' to 'ghostTd' in line no 252 it is working perfectly. Great Script , keep going.............
Feb 11 '08 #5
hi

I need a script that helps to drag and drop column cell data from one table to another table. one more script to drag and drop column cell data from another column cell in same table
Nov 21 '10 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: srikanth | last post by:
Hi all, I have an requirement in one of my projects. We have one aspx page, in that we have two frames, in each frame having a tree structure control(dynamic data). In the left Frame we are...
1
by: Targa | last post by:
I have an ASP scheduling application in which there are blocks of time, represented with a table, within another table which is the timeline. In other words, I have a table with a vertical...
6
by: jojobar | last post by:
Hello, I look at the asp.net 2.0 web parts tutorial on the asp.net web site. I tried to run it under firefox browser but it did not run. If I want to use this feature in a commercial product...
0
by: Kevin Bartz | last post by:
-----Original Message----- From: Kevin Bartz Sent: Monday, August 09, 2004 10:37 AM To: 'mike@thegodshalls.com' Subject: RE: Out of swap space & memory Thanks for your reply, Mike!...
6
by: Dave | last post by:
I am trying to implement drag and drop in a C# app, but for some reason I can't get it to call the GiveFeedback event. I have done everything by the book as far as I can tell, but a breakpoint in...
0
by: haegens | last post by:
I am making a .NET Application which has a TreeView Control in it. I have 3 levels of nodes. The toplevel is a rootnode which contains all other nodes. The second level holds one kind of nodes that...
17
by: Romulo NF | last post by:
Ive seen some people around the web wondering about a code to reorder table columns using the mouse (drag and drop). Since i had already made one script to reorder table lines (TRs) i decided to...
0
by: Romulo NF | last post by:
Ive recently posted a script to move columns from a table using drag and drop javascript. Recently ive received a message of a user of this communty showing interest in the script to move lines...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
4
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.