Menu
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.
712
To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page. Our example creates an interface to rearrange columns that have been laid out with CSS Grid.
Draggable() Method This method allows the elements to be dragged with the help of mouse. Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port.
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/
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
