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.

回答1:

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

回答2:

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/

回答3:

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?

回答4:

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.

回答5:

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>

回答6:

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.

来源：https://stackoverflow.com/questions/307882/jquery-draggable-table-elements

标签

jquery

css

drag-and-drop

html-table