jQuery’s draggable functionality doesn’t seem to work on tables (in FF3 or Safari). It’s kind of difficult to envision how this would work, so it’s not really surprising that it doesn’t.
<html> <style type='text/css'> div.table { display: table; } div.row { display: table-row; } div.cell { display: table-cell; } </style> <script src='http://code.jquery.com/jquery-latest.js'></script> <script src='http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js'></script> <script src='http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js'></script> <script> $(document).ready(function(){ $('.row').draggable(); }); </script> <body> <div class='table'> <div class='row'> <div class='cell'>Foo</div> <div class='cell'>Bar</div> </div> <div class='row'> <div class='cell'>Spam</div> <div class='cell'>Eggs</div> </div> </div> <table> <tr class'row'><td>Foo</td><td>Bar</td></tr> <tr class='row'><td>Spam</td><td>Eggs</td></tr> </table> </body> </html> I’m was wondering a) if there’s any specific reason why this doesn’t work (from a w3c/HTML spec perspective) and b) what the right way to go about getting draggable table rows is.
I like real tables because of the border collapsing and row height algorithm — any alternative that can do those things would work fine.
If you have truly tabular data, you should stick with table indeed.
And if you want to drag rows within a table, this JQuery + ‘draggable row table’ library works perfectly in FireFox3