dragtable: Visually reorder all your table columns

Welcome to this JavaScript blast from 2008! If you'd like to add table column dragging to your page, you should use this jQuery plugin instead. It's actively maintained and has a much better UI than the library described below.

For my new site & blog, visit danvk.org.

Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use. It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick.

But sometimes sorting just isn’t enough. What if you want to focus on just one or two of the columns in a table? In a client-side application you could drag the columns you care about next to each other. Why not in a web application?

Enter dragtable. Like sorttable, it teaches HTML tables a new trick through a simple class attribute. Here’s a sample:

Name Date Favorite Color
Dan 1984-07-12 Blue
Alice 1980-07-22 Green
Ryan 1990-09-23 Orange
Bob 1966-04-21 Red

Drag the column headings to rearrange the data in this table. This is a plain old HTML table with class=draggable set.

To achieve kMaxDHTMLGoodness, use sorttable and dragtable on the same table! Just set class="draggable sortable":

Name Salary Extension Start date
Bloggs, Fred $12000.00 1353 18/08/2003
Turvey, Kevin $191200.00 2342 02/05/1979
Mbogo, Arnold $32010.12 2755 09/08/1998
Shakespeare, Bill $122000.00 3211 12/11/1961
Shakespeare, Hamnet $9000 9005 01/01/2002
Fitz, Marvin $3300 5554 22/05/1995

To make the columns of a table reorderable, just follow these three easy steps:

  1. Download the dragtable Javascript library.
  2. Include the library by putting this in your document’s HEAD:
    <script src="dragtable.js"></script>
  3. Mark the table whose column headers you want to be draggable by
    giving it a class of “draggable”:

    <table class="draggable">

That’s it! Your table will instantly become interactive.

Q&A

Which browsers does dragtable work with?

These are just the browsers I’ve checked. If you try dragtable on
a browser not listed here, please let me know whether it works. dragtable
should work for at least 99% of all web surfers.

Browser Works?
IE 8.0.6001.18702 Yes
IE 7.0.5730.13 Yes
IE 6.0 Yes
Firefox 3.5 Yes
Firefox 3 RC2 Yes
Firefox 2.0.0.14 Yes
Firefox 1.5 Yes
Safari 3.1.1 Yes
Safari 2.0 Yes
Camino 1.6.1 Yes
Opera 9.2.7 Yes

dragtable keeps forgetting my column ordering!

If you set an id on your table, dragtable will save all column reorderings for that table in a cookie and replay them the next time you visit the page. If you don’t want it to do this, either 1. don’t set an id or 2. set class="draggable forget-ordering".

How does dragtable distinguish a click from a drag?

This should only be relevant if you’re using dragtable together with sorttable. If a user clicks a column header and then moves the mouse some amount, dragtable assumes they want to rearrange the columns. If they don’t move the mouse very much, dragtable considers it a click and sorttable will take it as a cue to sort on that column. The exact cutoff is a 10 pixel radius, but you can customize this by calling:

dragtable.setMinDragDistance(5);

somewhere on your page.

I found a bug/have a feature request

A bug? The horrors! Please head over to the dragtable project on Google Code and file your bug/feature request in the issue tracker. Or, even better start hacking around!

I’ve closed the comments below due to spam. If you have issues to report, please do so on the issue tracker.


166 Comments

  1. Dragtable: effetto drag-and-drop sulle tabelle | Blog.makernet.it said,

    June 27, 2008 at 9:25 am

    [...] scaricare il codice e per vedere lo script all’opera: http://www.danvk.org/wp/dragtable [...]

  2. Dragtable, una tabla sortable y dragable (y algún palabro más) | aNieto2K said,

    June 27, 2008 at 11:39 am

    [...] Javascript), con esta además, podemos mover las columnas ordenando los resultados a voluntad.[Demo] Compártelo ← 3 de 10: Entrevista a Daniel [...]

  3. uglychart.com: a blog about stocks » Blog Archive » links for 2008-06-28 said,

    June 27, 2008 at 10:31 pm

    [...] danvk.org » dragtable: Visually reorder all your table columns this is nice (tags: ui web programming javascript) [...]

  4. TheDaVis Blog — DragTable, la Tabla de las tablas said,

    June 28, 2008 at 9:36 am

    [...] DragTable es una librería JavaScript que permite mover de posición las columnas de las tablas HTML tradicionales y además permite ordenar las columnas de forma ascendente y descendente. Ver Demo [...]

  5. BenjaminKeen.com said,

    June 28, 2008 at 2:11 pm

    [...] stuff, from Dan Vanderkam. http://www.danvk.org/wp/dragtable/ No Comments [...]

  6. links for 2008-06-28 « toonz said,

    June 28, 2008 at 4:30 pm

    [...] danvk.org » dragtable: Visually reorder all your table columns (tags: javascript table webdev) [...]

  7. Greg Grothaus said,

    June 28, 2008 at 8:12 pm

    I noticed you are on the front page of programming.reddit.com – congrats.

  8. dpaladin said,

    June 28, 2008 at 9:48 pm

    its great :D

    i tried to use it, but the sortable doesn’t works, only the drag function

    i even copy & paste the table you used, but the table doesn’t sort, only its possible to drag it

    what can i do?

  9. dpaladin said,

    June 28, 2008 at 10:03 pm

    oh sorry, i find out

    maybe you can write that you need also the sorttable.js file for sorting :P

  10. links for 2008-06-29 | Libin Pan said,

    June 28, 2008 at 11:31 pm

    [...] danvk.org » dragtable: Visually reorder all your table columns Dragtable is a JavaScript library for making the columns of a table draggable. [...]

  11. Will said,

    June 29, 2008 at 4:03 am

    Great script, thanks a lot!

  12. Joe said,

    June 29, 2008 at 9:48 am

    If you use headers and footers in your tables. Make sure all columns align, 4 on top require 4 in the footer. If you miss one column, it won’t be dragable.

  13. rascunho » Blog Archive » links for 2008-06-29 said,

    June 29, 2008 at 1:40 pm

    [...] danvk.org » dragtable: Visually reorder all your table columns Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use. It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick. (tags: http://www.danvk.org 2008 mes5 dia28 at_home DataGrid DataTable grid table CSS javascript unobtrusive sort drag *****) [...]

  14. links for 2008-06-30 | Funny Web Pages said,

    June 29, 2008 at 5:35 pm

    [...] danvk.org » dragtable: Visually reorder all your table columns (tags: javascript table webdev drag html ajax design) [...]

  15. Moisés Márquez said,

    June 30, 2008 at 4:37 am

    Si tenéis páginas con tablas donde se presentan multitud de datos seguro que os habréis preguntado cómo se podrían ordenador [...]

  16. Vinicius Camara said,

    June 30, 2008 at 6:11 am

    Congratulations Fellow.
    Amazing example.

  17. Drum Boom said,

    June 30, 2008 at 7:19 am

    Thank you. Very useful I will post russian topic on my blog for lib popularisation.

  18. Сортировка и операции с TABLE на Javascript | Drum Boom said,

    June 30, 2008 at 7:43 am

    [...] и, наконец-то, нашел совсем свежее решение проблемы dragtable на основе предыдущей библиотеки от [...]

  19. Phil W. said,

    June 30, 2008 at 12:48 pm

    Dan, this is a great bit of code.

    One question: Like many others, I use striping or zebra-ing or alternate colors for each row. I realize that sorttable isn’t your code, but do you or anyone else know if there any way to preserve that alternate colors with the sorting? Thanks.

  20. Grok2 said,

    June 30, 2008 at 1:17 pm

    Brilliant!!! Worked for me on Opera 9.5:

    Version:9.50
    Build:10063
    Platform:Win32
    System:Windows XP
    Java:Sun Java Runtime Environment version 1.6

  21. dabdu said,

    July 1, 2008 at 12:31 pm

    works fine on Epiphany 2.22.2

  22. Skylog » Blog Archive » links for 2008-07-02 said,

    July 1, 2008 at 11:31 pm

    [...] dragtable: Visually reorder all your table columns (tags: javascript) [...]

  23. Foo said,

    July 2, 2008 at 8:31 pm

    Very nice!

    Sadly, there’s no facility to resize the table or to resize the column widths relative to one another. That’d make it really useful.

  24. Yogeshwar said,

    July 2, 2008 at 11:13 pm

    Is this code is free ware or do we need to take license

  25. hans said,

    July 3, 2008 at 1:36 pm

    great script thanx alot.

    one question: did anyone ever try the dragable in a absolute positioned table? seems to breake, any ideas?

    cheers,
    hans

  26. Colin said,

    July 8, 2008 at 10:19 pm

    This is a great script.
    Two questions:
    Which library are you using to display the column being moved? On mine, the drag works fine but you don’t see the column being moved.

    On my small table (8 columns) everything works fine. But on my table with 11 columns I can’t seem to drag the 11th column.

    Any ideas?

    Cheers
    Colin

  27. Recopilatorio diseño web » Innova Desarrollos informáticos said,

    July 13, 2008 at 2:07 am

    [...] Efectos: Reordenación visual de columnas de una tabla, espectacular dropdown, galería de fotos al estilo MS Surface, efecto slide, barra de progreso [...]

  28. Tablas que se ordenan y son movibles | Deambulando said,

    July 21, 2008 at 2:11 am

    [...] con Sorttable + DragTable si puedes! (que bien me ha salido el comercial [...]

  29. Charles-Antoine said,

    July 21, 2008 at 8:56 am

    Awesome ! ! Works fine and very easy to use… Thanks a lot.
    CA

  30. Aashish said,

    August 6, 2008 at 1:48 am

    Thnx a lot……i was searchin for this script a lot which was workin on IE 7 and also on firefox

  31. Mueve las columnas de una tabla con AJAX | Emilio José Rodríguez García said,

    August 10, 2008 at 7:22 am

    [...] trata de Dragtable una librería javascript que nos permitirá sin necesidad de recargar la página cambiar el orden [...]

  32. Del.icio.us Links » Blog Archive » links for 2008-08-18 said,

    August 18, 2008 at 7:56 am

    [...] danvk.org » dragtable: Visually reorder all your table columns (tags: programming HTML javascript design webdesign development) [...]

  33. Webmasterkit.info » Archives » Draggable table said,

    August 19, 2008 at 4:28 am

    [...] Link [...]

  34. 20 frische AJAX- und Javascripts | Javascript | Dr. Web Weblog said,

    August 21, 2008 at 5:30 am

    [...] dragtable Tabellen mit der Maus ordnen [...]

  35. Chritian said,

    August 22, 2008 at 3:26 am

    In Firefox the width of the new dragtable get not the width of the tablecolumn. When you defined a tablewidth via css the dragtable column has the same width eg. 100% of the page.

    You couldn’t use sortable without draggable. And the top position is the absolute of the body not from the parent relative element eg. div. Maybe you can give the new dragtable another css class or paste it at the end of the bodytag to seperate it via cascading from the original table.

  36. dragtable | Office-it.orG said,

    September 9, 2008 at 6:40 am

    [...] Here is its URL for dragtable: http://www.danvk.org/wp/dragtable/ [...]

  37. Rob said,

    September 16, 2008 at 2:57 am

    Hi there,

    This is a great script and saves me spending hours if not days trying to do this myself. The only problem i’m having is that it is understandably slow on my large datasets i’m using it with. Is there any way of speeding it up with some kind of preload or is there a specific number of rows where a slow performance is noticeable?

    Many Thanks

    Rob

  38. Cash Williams said,

    October 30, 2008 at 1:50 pm

    Great Code! Thanks

    Question – Is there anyway manually initialize the javascript? My table is built via ajax and doesn’t exist when the page is loaded, therefore it does not become draggable.

  39. pdx3d said,

    November 4, 2008 at 4:21 pm

    I tried it and has the same problem with sortable part of it like dpaladin. So I had to revert back to sorttable.js. Hope you can resolve this soon so more can benefit from your work. Thanks for sharing.

  40. 20 frische AJAX- und Javascripts | Dr. Web Magazin said,

    November 7, 2008 at 9:10 am

    [...] dragtable Tabellen mit der Maus ordnen [...]

  41. cromy said,

    November 9, 2008 at 7:13 pm

    can make a handle on this function? mabe a div or text that handle the drag and drop funtion.

  42. Cyril said,

    November 17, 2008 at 4:12 am

    Hi,
    This is a very smooth and easy to use, but when the table is long & hidden in scrolling DIV the Drag does not work. :(

    Can i find any updates.

  43. Kevin said,

    December 12, 2008 at 1:02 am

    How can i get the column’s order after drag and drop?

  44. Siva said,

    December 29, 2008 at 3:46 am

    Hi Dan,
    I tried this script for GridView. It is working fine if there is only one page. But not working when GridView spans 2 or more pages. Could you please help on this, how to make this script work for Paged GridView?

  45. Jon said,

    February 5, 2009 at 5:10 am

    Mozilla 1.7 works …

    But no matter what i try, i can’t get “lynx” to work … ;P

  46. AC said,

    February 5, 2009 at 4:11 pm

    Found 2 bugs I have fixed on my version:

    1) Doesn’t work well with Zebra tables, added a paremeter to add remove classNames based on odd/even.

    2) The draggable column width appears crazy on FireFox. Don’t seem to get it on your page, but I fixed it by adding units “px” to the width and height.

  47. Tim Streater said,

    February 21, 2009 at 4:11 am

    Just what I was looking for. Like another who commented, I build my table using AJAX. So, I found the initialisation code, put it in a function, made _timer and _dgtimer be global, and then called those initialisation functions once I built the table.

    Seems to work OK.

  48. 40 Useful JavaScript Libraries said,

    March 3, 2009 at 1:07 am

    [...] and dragtableTables, same them or not, are ease digit of the prizewinning structure to inform data. But they [...]

  49. 40 Useful JavaScript Libraries | ClickLogin Web Design said,

    March 3, 2009 at 5:53 am

    [...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  50. http://www.digiwu.com » Blog Archive » 40 Useful JavaScript Libraries said,

    March 3, 2009 at 6:53 am

    [...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  51. 40 Useful JavaScript Libraries | Tech Underground said,

    March 5, 2009 at 9:58 am

    [...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  52. Just Ziya » Blog Archive » 40 个轻量级 JavaScript 库 (下)|COMSHARP CMS said,

    March 5, 2009 at 10:45 pm

    [...] swfobject 这是一个最受欢迎的对 Flash 对象进行引用的方法。可以生成标准 swf 引用代… [...]

  53. 40 个轻量级 JavaScript 库(下) - Jeff-Chen.Com said,

    March 5, 2009 at 10:53 pm

    [...] 与 dragtable 不管你喜欢与否,table [...]

  54. 40 Useful JavaScript Libraries | The Scripts Zone said,

    March 5, 2009 at 11:22 pm

    [...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  55. 40 个轻量级 JavaScript 库 said,

    March 6, 2009 at 12:47 am

    [...] 与 dragtable 不管你喜欢与否,table [...]

  56. Feed Reader » 40 Useful JavaScript Libraries said,

    March 7, 2009 at 6:03 am

    [...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  57. Feed Reader (Beta) » 40 Useful JavaScript Libraries said,

    March 7, 2009 at 5:42 pm

    [...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  58. 40 Useful JavaScript Libraries « Hdeya team blog said,

    March 12, 2009 at 8:37 am

    [...] and dragtable Tables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  59. 陈宝成のBlog » 40 个轻量级 JavaScript 库 said,

    March 15, 2009 at 12:04 pm

    [...] 与 dragtable 不管你喜欢与否,table [...]

  60. TimeCode » 【Study.】 40 个轻量级 JavaScript 库 (下) said,

    March 21, 2009 at 7:12 pm

    [...] 与 dragtable 不管你喜欢与否,table [...]

  61. 40 Useful JavaScript Libraries | veryweblog focus on the internet ,new media. said,

    March 26, 2009 at 11:17 am

    [...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  62. 40 Useful JavaScript Libraries - o2webdev said,

    March 30, 2009 at 6:39 pm

    [...] and dragtable Tables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  63. dep said,

    April 2, 2009 at 11:27 am

    Is it possible to suppress the drag on certain columns?

  64. 我想网 » Blog Archive » 40 个轻量级 JavaScript 库 said,

    April 7, 2009 at 9:18 pm

    [...] 与 dragtable 不管你喜欢与否,table [...]

  65. 40 Useful JavaScript Libraries | Bookmarks said,

    April 20, 2009 at 1:06 pm

    [...] and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  66. Neeraj Dave said,

    May 5, 2009 at 6:59 am

    Hi Dan,
    I tried this script for GridView. It is working fine at almost on all browser except IE 8 beta version. Is there any setting needs?

    Also could you please help on this, how to make one or more columns fix, means I want few columns which have reordering functionality disable. Also I need to Hide/Unhide columns as per combo/list box..

    Thanks
    Dave

  67. Aaron said,

    May 11, 2009 at 8:44 pm

    IE8 = Error.

  68. Web design Speed | Web Development | Web Site Design | SEO | Tips » List of Really Useful JavaScript Libraries said,

    May 26, 2009 at 3:42 am

    [...] DragTable Enable users to change order of table columns by simply dragging them. [...]

  69. Список действительно полезных JavaScript-библиотек | WebDuty said,

    May 30, 2009 at 9:16 am

    [...] DragTable Добавляет возможность изменять порядок столбцов таблицы, просто перетаскивая их. [...]

  70. Muhammad Haris said,

    June 1, 2009 at 4:41 am

    The script is not working in IE8 and if i change its ode to IE7 even then its not working as IE7 is mentioned in the listed ones. Please do let me know if it works then how.

  71. lee eun suck said,

    June 3, 2009 at 3:07 am

    I’m from korea
    Please send me dragtable sourse
    mail : twilight2054@naver.com

  72. dyxyju said,

    June 8, 2009 at 1:57 pm

    for IE8
    - forEach(elt.style, function(k) { new_elt.style[k] = elt.style[k]; });
    + // forEach(elt.style, function(k) { new_elt.style[k] = elt.style[k]; });

  73. David said,

    June 9, 2009 at 9:26 am

    THis script doesn’t work with IE8.

  74. » 【转载】40 个轻量级 JavaScript 库 (下)- WEB前端开发- 专注前端开发,关注用户体验 said,

    June 23, 2009 at 10:42 pm

    [...] 与 dragtable 不管你喜欢与否,table [...]

  75. Sanjeev said,

    June 24, 2009 at 3:01 am

    Hi,

    Thanks,Every thing is working fine.But please tell me if header section is in different table and items are in different table then how can we acheive this functionality because at that time it will be two different object?Thanks in advance.

  76. Functional Tables with JavaScript Framworks Libraries | Developer Assets | Ultimate Smashing said,

    June 27, 2009 at 2:49 pm

    [...] 11- Dragtable [...]

  77. SOHU媒体技术产品中心-创意设计组 » [转载]40个实用的轻量级JavaScript库 said,

    July 14, 2009 at 2:07 am

    [...] and dragtable [...]

  78. Anzljc said,

    July 15, 2009 at 1:43 am

    I have problems with table when I make partial page refresh and of course then the columns can’t be reordered. Any solution?

  79. Anzljc said,

    July 16, 2009 at 1:04 am

    The problem is I can’t call init function more than once! But I have to, because of the search the table is not draggable anymore.

  80. danvk said,

    July 16, 2009 at 8:18 am

    Anzljc — see discussion at http://code.google.com/p/dragtable/issues/detail?id=8&can=1

  81. 40个轻量级 JavaScript 库 « oh2w.com said,

    July 21, 2009 at 10:12 am

    [...] 与 dragtable 不管你喜欢与否,table [...]

  82. gps said,

    July 28, 2009 at 1:35 pm

    Спасибо отличыне примеры..

  83. saravanan said,

    August 4, 2009 at 9:10 pm

    Wow! good example really wonderful script

    thanks

  84. 40个轻量级JavaScript脚本库 | 帕兰映像 said,

    August 29, 2009 at 1:10 am

    [...] sorttable and dragtable [...]

  85. chuck cottrill said,

    September 10, 2009 at 12:02 pm

    This (dragtable) is a great tool… love it!
    Had a user ask to be able to turn on/off the dragable – so I added a function toggleDrag()… you might consider adding this.
    -Chuck

  86. S B said,

    September 12, 2009 at 1:54 pm

    Hi Dan,

    I’m trying to get dragtable to work with rows instead of columns, but am running into what appears to be some Javascript limitations. Could you reply to me or at http://code.google.com/p/dragtable/issues/detail?id=4 to help me with this?

    Thanks!

  87. Дмитрий Шеметов said,

    October 7, 2009 at 10:58 pm

    Автор как всегда написал все понятно

  88. Савелий Андреев said,

    October 21, 2009 at 11:12 pm

    Я конечно мало что смыслю в посте но постараюсь осилить.

  89. Дмитрий Шумилов said,

    October 22, 2009 at 1:57 am

    Спасибо! Доходчиво и понятно объяснил

  90. 40 个有用的JavaScript库 - Ajax Finder [Ajax探索者] said,

    November 2, 2009 at 4:37 am

    [...] and dragtable Tables, like them or not, are still one of the best ways to present data. But they can be better: [...]

  91. Tong said,

    December 23, 2009 at 4:32 am

    you can disable some column see below.

    /// in html table element///

    xxx //can’t draggable
    xxx // draggable
    xxx // draggable

    ///// END HTML///////

    /// modify script librarie : ///

    for (var i = 0; i < headers.length; i++) {
    if(headers[i].className != "notdrage"){ //add this to disable by classname = "notdrage"
    headers[i].onmousedown = dragtable.dragStart;
    }
    }

    ///// END SCRIPT///////

  92. Kullanışlı Javascript Kütüphaneleri » Müjdat Korkmaz: Blog said,

    December 26, 2009 at 6:32 am

    [...] DragTable Enable users to change order of table columns by simply dragging them. [...]

  93. mahavir jain said,

    January 19, 2010 at 5:20 am

    can we add class for drag and drop column at drag drop event???

  94. Rafael said,

    January 29, 2010 at 8:55 am

    Hi
    my table have about 1800.

    I have edited the js to “get” only first 20 rows to move and works great, but when I drag de columns the browser “stop” I think because the size of the table.

    When I drop a column I do a “__doPostBack(…)”.

    where can i edit the code for just change de header position?

    Thanks

  95. Paul said,

    February 18, 2010 at 7:26 am

    I found a bug – cookies don`t work in IE6, IE8.

  96. 17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements : Web Lime – Design and IT blog said,

    March 11, 2010 at 7:04 am

    [...] dragtable: Visually reorder all your table columns [...]

  97. fernits said,

    March 11, 2010 at 9:30 pm

    Приятно узнать что думает по этому поводу умный человек. Спасибо за статью.

  98. 40个实用的轻量级JavaScript库 40 Useful JavaScript Libraries | Collection and sharing said,

    March 13, 2010 at 8:16 am

    [...] and dragtable [...]

  99. 17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements | tripwire magazine | The circuits of imagination said,

    March 16, 2010 at 4:06 am

    [...] This is a collection of Direct Manipulation examples that work in modern browsers. Each example is a proof of concept. It is not based on jQuery but I thought it deserved to be here anyway… dragtable: Visually reorder all your table columns [...]

  100. sanjeev said,

    March 26, 2010 at 8:50 am

    If I want to add the functionality od column resizing then can you help me please regarding this?

  101. Mohamed said,

    April 3, 2010 at 8:24 pm

    1st thanks for this great JS.
    Now I am working on a project using java and play framework(playframework.org) which allows MVC and I want to call a java method to save the changes done in the columns in a DB I can easly do that in JQuery yusing $.post(‘@{javamethod}’) but I want to add this to the dragtable.js
    IS that possible and how as I tried that and it didn’t work?

    (It’s an Educational project not for commercial use).

  102. dina said,

    April 6, 2010 at 7:44 am

    how can i save the new positions of columns in a database??

  103. List of Really Useful JavaScript Libraries « R@j@. R.K said,

    April 15, 2010 at 4:18 am

    [...] DragTable Enable users to change order of table columns by simply dragging them. [...]

  104. Petr said,

    April 21, 2010 at 3:46 am

    Hi ,
    I have two question,

    first it is possible to use this js in commercial project?

    second, can you help me to solve one thing.
    I succesfuly make mine table header drag and drop, I use paginator and when I pagiante Im using jquery load function to show only table new content.
    When I did this, so table header arent dragable.

    when I didnt use load function but only window.location and full reload whole page with new content all work fine.

    I will try solve this by google ant testing, but if you have some idea dont hasitate to write it.
    thank Petr, CZ

  105. Petja said,

    April 27, 2010 at 6:58 am

    Текст перспективный, закину сайт в избранное.

  106. PrunZesee said,

    April 28, 2010 at 4:51 am

    Бесспорно, отменная статья

  107. 40个实用的轻量级JavaScript库 « 80端口的简单幸福生活 said,

    April 29, 2010 at 11:33 pm

    [...] 流行的JavaScript库,如jQuery, MooTools, Prototype, Dojo和YUI等,完成起常见的JavaScript任务来得心应手。这些JS库为客户端动作(events)、动画特效(effects),和AJAX应用等提供很多现成的函数。而且如果这些库中的某一个无法直接达到你要的效果,还可能会有相关插件满足你的要求。JavaScript库的灵活性给我们的工作提供方便,但有利也有弊——比如说JavaScript文件过大的问题。尽管放弃这些著名的JavaScript库能显示你的聪明才智,但你可能还是会愿意采用一些体积小巧、专注于特定任务的JavaScript库。以下是40个帮助你达到特定目的的独立JavaScript库。 网上能用的当然不只这些,但每位网页设计师和程序员应该都能在这里有所收获。1. 表单wFormswForms 是一个开源的、 无入侵的(unobstrusive)[sup]注*[/sup]代码库,能够简化大部分与表单相关的常用JavaScript函数。 它能对表单的用户输入值进行验证,只需为表单元素添加一个特定的类即可使用。另外,wForms 还具有强大的表单同步(例如“全选/全不选”)和条件表单(如,当x被选择则显示y)功能。注* 这个词也被译为“不唐突”,“有的放矢”等。意即JavaScript代码和HTML代码分离,同时也对不同版本浏览器选择性地做出反应,以提高用户体验。更多解释,请参照“为之漫笔”。译者认为“无入侵”贴合英文原文,作为术语更加简洁易懂,应该成为这个词的通用译法。ValidanguageValidanguage 是一个无入侵的 JavaScript表单验证框架。 它有一个继承逻辑,可以全局定义,也可以对每个表单或每个元素分别定义。 利用作者提供的两个API,以及诸如综合的AJAX支持(integrated AJAX support)、缓存和调用函数等特性,该框架可以提供强健的(robust)验证体验。两个API用以高级设置,分别是加在注释里的像HTML语言的 API和基于JavaScript对象的API。LiveValidationLiveValidation是一个轻量级的JavaScript库,提供一系列验证函数。除了经典验证法,此库还具有实时验证(live validation)特性,能根据你键入的文字实时控制特定区域。 Ruby on Rails的开发者会发现LiveValidation异常好用,因为二者的命名规范和参数设置非常相似。虽然它是独立库,不过也有一个Prototype版[sup]注*[/sup]。注* 也就是依赖于Prototype库,但是本身代码更简洁的版本yav一个功能强大、可扩展、使用灵活的表单验证代码库。yav可处理多种情况,从日期、email、整数之类的基本验证到掩码文本框和自定义正则表达式之类的高级应用,都得心应手。该库内建AJAX支持,并且可以轻易在每个对象层自定义错误显示信息。qForms处理表单的完全解决方案。为开发者提供诸如多样验证规则,阻止多次提交,锁定/禁用域等特性。formreform不用表格来实现多栏布局通常都很有挑战性。这个小巧的代码库能够把一个简单表单转换成一栏、两栏或四栏格式化布局的表单。利用formreform能自动让表单样式适应任何设计。2. 动画$fx()$fx() 是一个用户为HTML元素添加动画效果的轻量级代码库。利用此库,你可以指定在一定时间内改变任何CSS属性。对于复杂动画,你可以合并效果,给各效果分组,让它们链式反应或者同时发生。你还可以为每一步动画设定不同的回调动作,进行更深入的自定义。JSTweener补间动画的JavaScript库。它的API和著名的ActionScript补间动画引擎 Tweener 相似。你可以调用动画时间,定义形状变换方式和延迟。在几乎任何时间点(如onStart – 开始时, onComplete -完成时, onUpdate – 更新时),你都可以引发新动作。Facebook Animation用于创建基于CSS的自定义动画的强大代码库。利用一两行Facebook Animation,你就能改善用户界面。本代码库的语法遵循FBJS(在Facebook实用工具中使用的代码库),一旦学会,你也就具备了创建Facebook实用工具的能力!FX一个轻量级代码库,拥有和YUI类似的使用句法。FX可以为几乎所有CSS属性创建补间动画。支持颜色和滚动动画。你只需要设计任意对象,任意属性的起始值和结束值就够了。3. 视觉化和图像特效JS chartsJS charts 可以输出柱状图,饼图和曲线图。只需从一个XML文件或JavaScript数组里调用数据,它就能提供极佳的易用性。图表被输出为png图像文件。该库支持大部分流行的浏览器。Canvas 3D JS Library (C3DL)C3DL让编写3D应用更加容易。它提供一组算法、场景和3D对象类,对于想在浏览器里开发3D内容,但是对3D图像的深层算法不甚了了的程序员真是不小的福音。Processing.js这个JavaScript库指向 Processing 语言 (一个用于图像、动画和交互编程的语言)。它有丰富的特性用于创建2D输出,提供形状/图像绘制方法、颜色处理、字体、对象、算法函数等等。Rapha?l一个极赞的代码库,简化在网页中使用矢量图形的工作。Rapha?l 利用SVG和VML来创建图像,并能为这些图像绑定动作处理器。该库功能强大,包括旋转、动画、缩放和绘制曲线、矩形、圆形等。ImageFX可以为图像添加特效,例如模糊、锐化、浮雕、变亮等等。ImageFX使用画布元素来创建效果。兼容所有主流浏览器(你可以在其页面看到兼容性列表)。此库简单易用,只需要在网页中插入.js文件然后用一行代码调用就够了。PixasticPixastic 使用HTML5的画布对象,此对象可以直接处理像素级数据。支持的效果包括减淡和去色、反相、翻转、亮度和对比度调节、色相和饱和度、浮雕、模糊等等等等。由于画布对象相对较新,各个浏览器对这一JavaScript库的支持程度不尽相同。Reflection.js自动创建倒影效果的无侵入JavaScript库。倒影的高度和透明度可以自定义。使用该库就像给图像添加一个“类”一样简单。在所有主流浏览器中都能正常工作,文件大小不过5 KB。4. 数据库Taffy DB可以作为浏览器中的SQL数据库来使用的JavaScript,也可以看做是一个高级的“数组管理器”。在AJAX化的Web应用中,它可以工作在数据库层。你可以创建、读取、编辑和删除数据,也可以使用循环、归类以及各种高级查询方式。ActiveRecord.js此库支持Google Gears和Chrome,Aptana Jaxer,Adobe AIR ,以及任何支持W3C HTML5 SQL规范的平台(现在Webkit和iPhone也支持了)。它使在JavaScript利用数据库变得简单。使用ActiveRecord.js, 你能自动创建数据表、验证和同步数据等等。5. 字符串和数学函数Date.js和日期打交道总是很容易把人搞昏掉。如此多的点、斜杠和格式。Datejs以令人耳目一新的方式提供或简单或复杂的日期函数。它可以处理如下格式的日期:“Next thursday”(下星期四), “+2 years”(两年后) 以及诸如2009.01.08, 12/6/2001的所有格式。译注:此函数很有用啊,哪位朋友来把它汉化成可以支持中文就好了。Sylvester此JavaScript库可以轻松处理矢量和矩阵。有了它你就不用被一串串循环和大量数组搅得头昏脑胀了。此库包含模数化矢量和任意维度的矩阵的类,从而可以计算无限直线的模数和3D空间里的平面。译注:太高级了,直冒冷汗“` -_-||Pretty Date 一个聪明的JavaScript解决方案,让过去一个月内的日期以更加漂亮和用户友好的方式显示。它能让日期以距离现在多久的方式显示,如“3天以前”,“昨天”。XRegExp正则表达式可以在JavaScript里通过RegExp对象加以利用。 XRegExp 能使正则表达式变得更加强大,它提供一些在将来的浏览器才会实现的特性(据 ECMAScript 4 – ES4 的开发愿景)。使用该库,RegExp对象可以被缓存和再利用,还能为已经存在的RegExp对象添加修改器等等。JavaScript URL Library一个用与方便处理URLs的JavaScript库。如果需要,它可以控制到将URL内每一个部分当做字符串来处理。这一URL代码库刚出炉不久,但已能像刚才所提一样工作。6. 字体typeface.js一个用以在网页上使用任意字体的代码库。与流行的解决方案(如sIFR 和 FLIR)不同,typeface.js 并不需要Flash,是100%的JavaScript应用。要使用任意字体,只需上传其字体文件到一个 基于网页的字体生成器,然后下载渲染过的JavaScript文件,把它添加到你的网页中即可。Cufón与typeface.js十分相似, Cufón 也是一个让你在网页中使用TrueType字体的代码库。同样,它也使用一个生成器来将字体文件转换成VML图像。只需在网页中插入generated .js文件,你即可像使用普通字体一样使用你指定的字体。译注:这两个工具对于中文网页不太实用…… (⊙_⊙)7. 调试与记录Blackbird在JavaScript开发过程中,经常会用到alert()函数来添加断点。Blackbird 提供一个风格化的控制台,用以记录、查看和过滤JavaScript中的消息,如此即可消除在每个alert()的停顿,并且更好地分析它们,从而加快开发进程。NitobiBug基于浏览器的,跨浏览器 JavaScript 对象记录和检测组件。通过在你的代码中插入规则(和JavaScript对象的用法类似),你可以轻易区别简单类型,如字符串、布尔值和数值,以及复杂元素,如错误信息和JavaScript对象。Firebug LiteFirebug,大概是世界上最好的JavaScript调试工具,可惜只能在Firefox中使用。要在所有浏览器中拥有一个类似工具,向你的网页添加这个Firebug Lite .js文件吧,面对你的是你所熟悉的功能和界面。8. 其他swfobjectswfobject 是最流行的,扩展性最好的插入Flash影片的方式。此库符合Web标准,生成可以通过验证的标记,能够自动检测用户的Flash播放器版本,如果版本不匹配,它还允许你向用户显示代替内容。你可以看一看“为什么应该使用swfobject”这篇文章,写得不错。sorttable and dragtable不管你喜不喜欢,表格仍然是展示数据的最佳方式。不过表格还可以更好用: sorttable 让表格数据可以排序,升序降序均可。你指向为添加class=”sortable” 属性。你还可以排除某些特定的栏,让他们不自动排序,以及指定升序或者降序哪一个为默认值。dragtable 使表格的行列变得可拖动。在网页中插入此库后,同样,给表格添加一个class=”dragtable”即可。如果需要两个功能都用,只需在网页中包含同时两个库,然后添加class=”sortable dragtable” 。DD_roundies and DD_belatedPNGDD_roundies 是一个极佳的不利用图片创建圆角的JavaScript解决方案。它处理的重点在IE,通过使用VML来解决问题。其他浏览器被忽略,因为他们支持CSS的 border-radius 属性。(译注:Really?)DD_belatedPNG为臭名昭著的IE6 PNG问题提供了一个可自定义的解决办法。不论PNG图像是用于“src”或是“background-image”中,DD_belatedPNG 都能把它解决掉。与其他解决方案不同, “background-position” 和 “background-repeat” 属性也能正常工作!译注:这个太实用啦!O(∩_∩)O 哈哈~Custom JavaScript Dialog Boxes用于创建自定义对话框的轻量级(约 4.5 KB)代码库。四种对话框可用: alerts(出错), warnings(警告), prompts(提示), success(成功)。利用一个简单的函数,你可以自定义对话框的标题,内容和显示时间。GameJSGameJS 是一个JavaScript版本的 Microsoft’s XNA 游戏框架, 使用 “画布” 作为渲染机制。JavaScript不是编写游戏的最佳平台。不过如果是那些帧速要求较低的游戏,而你又是一个JavaScript开发者,何乐而不为? 此库包含一些控制游戏元素、屏幕显示和键盘操作的方便好用的类。Shortcuts.js自从Google Reader和Gmail之后,Web应用里的键盘快捷键变得越来越流行,因为他们大大提升了易用性。Shorcuts.js提供更为方便地处理键盘快捷键的函数。 使用该库,创建快捷键,然后在按下键盘的同时就运行函数成为更易实现的可能。Mapstraction几个不同的地图供应商都提供了各自不同的API。如果你想在供应商之间转换(比如说从Google Map转到MapQuest),则需要重写一些代码。Mapstraction就是用来帮你解决这个问题的。它提供一个通用 API ,帮你在大多数流行的地图供应商之间转换。只需更新一行代码,即可转换完毕。Amberjack一个小巧的JavaScript库,为你的网站添加上漂亮的导游信息。 一旦启用,一个模式化的内容框就能像到导游一样介绍您的站点,框内可以添加任意你想要的内容。导游内容的代码可以手工编写,也可以用线上工具自动生成。当然,你可以通过编写css或者利用即刻可用的主题来使导游信息符合内容框的样式。JsLoadJavaScript库的远程载入API。JsLoad这个简单的API能够让你从Google的服务器上导入大体积JavaScript文件。JsLoad能自动载入任何版本代码库的依赖文件。关于作者Umut Muhaddisoglu是一位网页设计师,同时也是程序员。他维护网站WebResourcesDepot,一个每天提供免费网页设计和开发资源的网志。要联系作者,你可以在Twitter上关注他。(完)?原文 40 Useful JavaScript Libraries 来自Smashing Magazine ,作者为 Umut Muhaddisoglu。译者笨活儿保留译文版权,转载请保留出处和此版权信息。欢迎留言指正错误。 [...]

  108. 40 Useful JavaScript Libraries « 80端口的简单幸福生活 said,

    April 29, 2010 at 11:33 pm

    [...] sorttable and dragtableTables, like them or not, are still one of the best ways to present data. But they can be better:sorttable is a library that makes tabular data sortable, both ascending and descending. To do this, simply add class=”sortable” to the table. You can also exclude certain columns from being sorted and make either ascending or descending the default behavior. dragtable is another library that makes columns draggable. After inserting the library in the Web page, add class=”dragtable” to the table as above. Best of all, both libraries can be used together. Simply add class=”sortable dragtable” to the table after including both libraries in the Web page. [...]

  109. 40 个轻量级 JavaScript 库 (下) « i在云端 said,

    May 2, 2010 at 10:21 am

    [...] 与 dragtable 不管你喜欢与否,table [...]

  110. chris said,

    May 3, 2010 at 10:06 am

    Hi, great code info!

    Is there a method to get the actual field order of each field after draging and dropping?

  111. Энергия said,

    May 7, 2010 at 7:36 am

    В целом, автор нетипично отжег.

  112. 40个小巧的独立JavaScript库 | Billy 的博客 said,

    May 7, 2010 at 6:05 pm

    [...] and dragtable [...]

  113. List of Really Useful JavaScript Libraries « SaiSatheesh said,

    May 27, 2010 at 12:47 am

    [...] DragTable Enable users to change order of table columns by simply dragging them. [...]

  114. Anant said,

    June 2, 2010 at 5:52 am

    Awesome work..

    It help me a lot.

    Thanks dude.

  115. MB34 said,

    June 2, 2010 at 5:57 am

    Wondering about the values saved in the cookie.

    This is my column ordering:
    One Six Four Three Five Two

    This is what is stored in the cookie:
    1/5,4/1,2/3

    I just don’t get the correlation…

  116. MB34 said,

    June 2, 2010 at 5:59 am

    Now, after resetting them back to this order:

    One Two Three Four Five Six

    this is what is saved in the cookie:
    1/5,4/1,2/3,0/4,1/2,4/0,5/1,2/5

    HUH?????

  117. MB34 said,

    June 2, 2010 at 12:36 pm

    OK, I have something working that is a little easier to work with as far as the ordering is concerned…

    These are the changes I made to make it store the column indexes in the cookie based on the id of the column. I needed this to be able to handle some pretty unique situations.

    // Store a column swap in a cookie for posterity.
    rememberDrag: function(id, a, b, table) {
    var cookieName = “dragtable-” + id;
    var new_val = “”;
    // This gets the id’s of each column to store in the cookie in this format:
    // 1|2|3|4|5 etc so it can be split.
    //
    // Needed so I can determine column order for different process.
    //
    forEach(table.firstElementChild.rows[0].childNodes, function(cell) {
    if (cell.id > -1) {
    new_val += cell.id + ‘|’;
    }
    });
    new_val = new_val.trim();
    new_val = new_val.substr(0, new_val.length-1);
    dragtable.eraseCookie(cookieName);
    dragtable.createCookie(cookieName, new_val, dragtable.cookieDays);
    },

    // Replay all column swaps for a table.
    replayDrags: function(table) {
    if (!dragtable.cookiesEnabled()) return;
    var dragstr = dragtable.readCookie(“dragtable-” + table.id);
    if (!dragstr) return;
    var pair = dragstr.split(“|”);
    var a = parseInt(pair[0])-1;
    dragtable.moveColumn(table, 0, a);
    a = parseInt(pair[1])-1;
    dragtable.moveColumn(table, 1, a);
    a = parseInt(pair[2])-1;
    dragtable.moveColumn(table, 2, a);
    a = parseInt(pair[3])-1;
    dragtable.moveColumn(table, 3, a);
    a = parseInt(pair[4])-1;
    dragtable.moveColumn(table, 4, a);
    a = parseInt(pair[5])-1;
    dragtable.moveColumn(table, 5, a);
    a = parseInt(pair[6])-1;
    dragtable.moveColumn(table, 6, a);
    },

    I do, however have one question…How do I call moveColumn from a function outside of the dragtable class? I can’t seem to send the table as a parameter.

    I placed arrow images on the right/left of each column and I want the user to be able to click the image to move the column to the right or left based on the image they clicked.

  118. MB34 said,

    June 11, 2010 at 9:53 am

    Does ANYONE know how to get help with this stuff???

  119. Crash said,

    July 16, 2010 at 2:05 am

    The same problem can anyone help please

  120. テーブルの列を手軽にドラッグ&ドロップで入替え出来るようにするJavaScriptライブラリのdragtable - redtower's memo said,

    July 30, 2010 at 12:44 am

    [...] ref. http://www.ideaxidea.com/archives/2008/06/javascriptdratable.html ref. http://www.danvk.org/wp/dragtable/ [...]

  121. Walton Plouffe said,

    August 3, 2010 at 3:10 am

    Really!, this has been a premier superior write. The theory is that I would like to create this way too – spending time and actual effort to make a smart story… still , what can I say… I put things off a whole lot but not seem to get something basically finished

  122. [收集]四十个非常实用的轻量级JavaScript库 | 瓶子的资料库 said,

    September 7, 2010 at 3:04 am

    [...] sorttable and dragtable [...]

  123. Smark said,

    September 21, 2010 at 5:00 am

    Не помню где я уже встречал такую же тему хотя пофиг

  124. Автоном said,

    September 21, 2010 at 9:13 am

    Чего и следовало ожидать, тот кто писал убого опубликовал.

  125. How would you do this? - Jquery Home said,

    October 7, 2010 at 9:13 am

    [...] I already have some thing similar using the jQuery dragtable plugin here but it was using only one row because it is used to reorder the columns in one table: http://www.danvk.org/wp/dragtable/ [...]

  126. DronycymnCrot said,

    October 13, 2010 at 5:58 am

    Hello everyone, long time fan first time poster here

    excited to be a member, and I can’t wait to begin getting more active here

    Until then visit my page http://seoarticlewriter.goingonline.co.za/2010/10/13/the-three-resistant-internet-advertising-secrets/

  127. Sam said,

    October 21, 2010 at 2:35 am

    great. Can it be also grouped ?

  128. javascriptの様々なライブラリで便利なプラグインまとめ(テーブル編) « Tech Blog « Layer 8 said,

    November 17, 2010 at 6:18 am

    [...] drag table 列の表示・非表示を操作できるjqueryのプラグイン jQuery columnManager plugin [...]

  129. Take Your HTML Tables to a New Level with JavaScript Frameworks said,

    November 19, 2010 at 12:15 am

    [...] dragtable [...]

  130. T. Alexander Lystad said,

    November 21, 2010 at 4:36 pm

    The script doesn’t pass JSLint. Lots of errors :( Which is bad.

  131. Bart McLeod said,

    December 16, 2010 at 9:04 am

    Thanks for sharing this. I experience some problems, but I still think your script is great.

    Problems I find:
    - Slow with large columns
    - no clear visual feedback (am I dragging or not, can’t tell)
    - Footers do not come along (maybe a cellcount mismatch, have to check!)
    - Ajax filling of table has some problems with the ordering, must figure out what comes first. Would be great if initialization could be run over and over again to cope with difficulties like that on, will look if any documentation tells us about that.

  132. Bart McLeod said,

    December 16, 2010 at 9:11 am

    I wrote a small test, footers do come along in that test.

  133. Bart McLeod said,

    December 16, 2010 at 9:16 am

    Visual feedback is also working with small tables.

  134. Bart McLeod said,

    December 17, 2010 at 2:24 am

    It seems that in our large table, the footers that do not come along have absolute positioning, which makes it obvious that they do not move.

  135. Simple Jain said,

    February 10, 2011 at 7:01 am

    Please suggest how to implement column drag and drop in asp.net grid view

  136. прокси said,

    February 22, 2011 at 7:54 am

    анонимный прокси сервер

  137. 40 个轻量级 JavaScript 库 (下) | 海蓝博客 said,

    March 1, 2011 at 6:08 am

    [...] 与 dragtable不管你喜欢与否,table [...]

  138. javascriptの様々なライブラリで便利なプラグインまとめ(テーブル編) said,

    March 29, 2011 at 3:55 am

    [...] drag table 列の表示・非表示を操作できるjqueryのプラグイン [...]

  139. 40个非常实用的轻量级JavaScript库 | 百锐网 said,

    April 27, 2011 at 10:39 pm

    [...] sorttable and dragtable [...]

  140. Аквариум своими руками said,

    May 6, 2011 at 11:34 am

    Hello everyone, long time fan first time poster here

  141. Волнистые попугаи said,

    May 6, 2011 at 11:35 am

    Really!, this has been a premier superior write

  142. Yotarzan said,

    May 17, 2011 at 1:34 pm

    Awesome and extremely easy to use!!!

  143. 40 个轻量级 JavaScript 库 - 志成塾 said,

    May 17, 2011 at 6:27 pm

    [...] 与 dragtable 不管你喜欢与否,table [...]

  144. LePirlouit said,

    May 20, 2011 at 10:14 am

    Hi danvk,

    I’m interesseted to join your project.

    I have added some improvement to your code, and resolved partialy
    issue number 23

    http://code.google.com/p/dragtable/issues/detail?id=23

    pleaase write me an email.

  145. Sulaiman said,

    May 25, 2011 at 3:35 am

    I have created a dynamic table in jquery. but the class is not working when i create a dynamic table and add a class to it. else it is working fine when i add a class in a manually created table. Can you tell me how to solve this issue. I am facing this issue from last three days.

  146. Deepx said,

    June 18, 2011 at 4:13 am

    To get the code if you dynamically creating a table:

    Create and fill table
    Add Class ‘draggable
    Run code:

    forEach(document.getElementsByTagName(‘table’), function(table) {
    if (table.className.search(/\bdraggable\b/) != -1) {
    dragtable.makeDraggable(table);
    }
    });

  147. 40 Useful JavaScript Libraries | Takedown Studio said,

    June 29, 2011 at 5:39 pm

    [...] and dragtable Tables, like them or not, are still one of the best ways to present data. But they can be [...]

  148. 40 lightweight JavaScript library () said,

    July 26, 2011 at 3:54 am

    [...] and dragtableWhether you like it or not, table is is still the best performance data way, but can better [...]

  149. julhaw said,

    August 23, 2011 at 11:32 am

    This really is a great piece of code and easy to implement. I also had to figure out how to get it to work with an ajax created table. I had to comment out the folllowing two lines in the init method:

    // if (arguments.callee.done) return;
    // arguments.callee.done = true;

    Then when my ajax was done loading I just called dragtable.init()

    A couple of other things. 1) you cannot have a div that is scrollable. It screws it up. So I had to make the scroll be back on my document instead off an individual div. 2) you can’t have text input boxes in the header row of the column as you won’t be able to click into the text box to edit it. I had a table that had filters in the header row along with the name of the column. I had to move the filters to the first tbody row.

  150. JavaScript の便利なプラグインまとめ(テーブル編) said,

    September 7, 2011 at 10:00 pm

    [...] drag table 列の表示・非表示を操作できるjqueryのプラグイン [...]

  151. JavaScript plugins for better table functionalities said,

    September 10, 2011 at 8:01 pm

    [...] columns, and sorting. Table sorter – A jquery plugin for table sorting, easy to implement. drag table is another jquery plugin that is easy to implement and enables users to reorder table columns by [...]

  152. Esther Ransford said,

    September 20, 2011 at 1:09 pm

    Firefox / internet can not work but connection to the internet is excellent?

  153. brad said,

    October 26, 2011 at 5:33 am

    can you fix a particular column so it is not draggable?

  154. brad said,

    October 26, 2011 at 5:33 am

    can you highlight the place the column will be dropped while it being dragged?

  155. Tushar Maini said,

    October 27, 2011 at 3:27 pm

    nice work . its clean and clear

  156. Benjamin said,

    November 9, 2011 at 7:47 am

    Hi, realy nice work!
    is it possible to save the table without cookies, mabye with a database an build the table again?

    Thank you for helping

  157. rucs said,

    December 2, 2011 at 9:51 am

    Does it work on Firefox 8??Doesnt work for me!!

  158. Kristie Forcier said,

    December 4, 2011 at 12:05 am

    Unquestionably believe that which you said. Your favorite reason appeared to be at the net the simplest factor to consider of. I say to you, I definitely get irked while other folks think about worries that they plainly do not recognize about. You managed to hit the nail upon the top and also outlined out the entire thing without having side effect , other folks could take a signal. Will probably be back to get more. Thanks!

  159. Houmpmichael said,

    December 9, 2011 at 1:51 pm

    you love this? for less , just clicks away

  160. Lola_Sib said,

    December 12, 2011 at 5:23 am

    hermione sex pix porn hentai movis pairis hilton sex sence school college sex party pics small penis sex galleries g4 wired for sex julian rios porn movies volleyball ass gallery adult movies by mail rental ashton moore sex pics gay lady sex father and son sex tube free bloody sex sex change penis implant nintendo sex game free asian sex pictures xnxx free natural porn ass parade felicia porno movies 1 day trial hustler sex barely legal

  161. galaxy s2 blacklist said,

    December 13, 2011 at 11:03 pm

    Gday, you should know that this web site features troubles rendering correctly using Mac OSx together with the native edition of safari. It seems as if the text is to large for all the boxes?

  162. Kullanışlı Javascript Kütüphaneleri — Müjdat Korkmaz – Design Blog said,

    April 22, 2012 at 8:42 am

    [...] [...]

  163. Guilherme Cruz said,

    April 30, 2012 at 7:40 pm

    Dear Friends,

    I am looking for a jQuery plugin that works with tables and allows all the five features below:

    1) Drag and drop of an entire row (up, down).

    2) Drag and drop of an entire column (left, right) * This is the most important!

    3) Add new rows visually just passing the mouse over the bottom limit of the table.

    4) Add new columns visually just passing the mouse over the right limit of the table.

    5) By double clicking, edit the content of the cell.

    I would aprecciate any tip or solution.

    Thanks a lot!

    Guilherme Cruz

  164. saimann said,

    May 10, 2012 at 9:25 pm

    Thank you. Very useful :)

  165. Jonas said,

    May 25, 2012 at 1:12 pm

    I read my TABLE with ajax.
    Why aplly this winth a function?

    like $(‘#table_id’).dragtable();

  166. Joby Joseph said,

    June 26, 2012 at 11:41 pm

    Hi,

    Can I implement the same on row level?