jQuery draggable table elements
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.
Answer
There is a way to make table rows draggable with JQuery UI too. All you need to do is set the helper option to a function returning a new div with a table inside that will host the row you are dragging like:
helper: function(event){
return $('<div class="drag-cart-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end();
},
Thx to David Petersen for the tip: http://blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/