jQuery draggable table elements

StackOverflow https://stackoverflow.com/questions/307882

Question

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.

Was it helpful?

Solution

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

OTHER TIPS

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/

Just in case anyone makes the same mistake I did:

If you want to be able to reorder TRs inside a table by dragging them around, .sortable is what you need rather than .draggable

Just me?

This is kinda late, but today I found html5 drag'n drop API works fine with <tr> element. All you need to do is enable it <tr draggable="true"> and register the events 

dragstart
drag
dragenter
dragleave
dragover
drop
dragend

I found this article very helpful http://www.html5rocks.com/en/tutorials/dnd/basics/

!!Be aware that there is a flaw in this html5 API that the event will be fired when you hover over the child elements even though you are only interested in the parent element. Hope html5rocks people will fix it soon.

I made this work by using JqueryUI with the following:

$(function() {
  $(".sortable").sortable({
    revert: true
  });
});
table td {
  border: solid 1px black;
}
table {
  border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table>
  <tbody class="sortable">
    <tr>
      <td>1</td>
      <td>One</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Two</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Three</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Four</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Five</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Six</td>
      <td>some text</td>
    </tr>
  </tbody>
</table>

One can also set css tr.ui-draggable-dragging {display: block} - this way one can drag the rows, however, their coordinates are poorly calculated. I haven't found a good solution for this issue yet.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top