473,700 Members | 2,616 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Drag & Drop Table Columns (new version, explained)

54 New Member
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('tabl eOne')

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 13783
nitinmehra
1 New Member
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
Romulo NF
54 New Member
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(table ID)

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 Recognized Expert Moderator MVP
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
rathina04
1 New Member
after changing the 'gho stTd' to 'ghostTd' in line no 252 it is working perfectly. Great Script , keep going.......... ...
Feb 11 '08 #5
priyankaagarwal
1 New Member
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
4165
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 displaying all the documentcollections(dynamic) in the Treestructure, In the Right side we are displaying all the HolderGroups (dynamic).We have to assing Any one of the Documentcollections to HolderGroups, through Drag and Drop
1
2429
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 timeline. Each row represents a 1/2 hour of time starting at 12 AM. The scheduled job is represented by another smaller table inside the timeline table which spans vertically the time alloted for the job. Say if the job was scheduled for 2 hours, the...
6
3550
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 where the user can run on firefox/mozilla, what would be a good approach. 1. Should I overwrite the javascript code drag-and-drop to make it more browser independent. If I want to go this route, can anybody provide me a
0
2466
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! Theoretically, I should need only six of the columns, but as a means of verifying integrity, I would like to de-dup using all the columns. For instance, if there are two rows identical everywhere but some column outside the six, I would like to know about...
6
11063
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 the GiveFeedback event is simply never reached. I know that's not much to go on, but if anyone can suggest what I might have missed I'd be very grateful. -- Dave
0
2520
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 have one type of objects assigned to the tag property. The third level holds another kind of nodes. Also this level has one type of objects assigned to the tag property. The objects that are assigned in the third level nodes, are child objects of...
17
31664
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 start working in one to reorder the columns. Im sharing this code with you all now. If anyone find any issue needing improvements just email-me and i will try to fix. The implementation is very easy, only change the ID of the table in the tabelaDrag...
0
8450
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 instead of columns. This post will present the script for you guys. file: moverows.css table {border-collapse:collapse; cursor:pointer} td {width:30px; padding:5px; text-align:center; font:bold 14px verdana; color:#000; border:1px solid #000}...
0
9218
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8975
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8929
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6564
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5904
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4660
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3095
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2395
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2031
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.