jQuery перетаскиваемые элементы таблицы - PullRequest
Новая
       50

jQuery перетаскиваемые элементы таблицы

28 голосов
/ 21 ноября 2008

Функциональность draggable в jQuery, похоже, не работает с таблицами (в FF3 или Safari). Трудно представить, как этот будет работать, поэтому неудивительно, что это не так. 

<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>

Мне было интересно: а) есть ли какая-то конкретная причина, по которой это не работает (с точки зрения спецификации w3c / HTML), и б), как правильно получить перетаскиваемые строки таблицы.

Мне нравятся реальные таблицы из-за алгоритма свертывания границ и высоты строк - любая альтернатива, которая может сделать это, будет работать нормально.

Ответы [ 6 ]

35 голосов
/ 09 февраля 2010

Есть способ сделать перетаскиваемые строки таблицы также с помощью JQuery UI. Все, что вам нужно сделать, это установить параметр помощника для функции, возвращающей новый div с таблицей внутри, в которой будет размещаться строка, которую вы перетаскиваете, как: 

helper: function(event){
return $('<div class="drag-cart-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end();
},

Спасибо Дэвиду Петерсену за подсказку: http://blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/

22 голосов
/ 21 ноября 2008

Если у вас действительно табличные данные, вам следует придерживаться таблицы.

И если вы хотите перетащить строки в таблицу, эта библиотека JQuery + "таблица перетаскиваемых строк" отлично работает в FireFox3

11 голосов
/ 18 апреля 2012

На всякий случай, если кто-то совершит ту же ошибку, что и я:

Если вы хотите изменить порядок значений TR внутри таблицы, перетаскивая их по кругу, вам нужен .sortable, а не .draggable

Только я?

3 голосов
/ 06 мая 2013

Это немного поздно, но сегодня я нашел html5 API drag'n drop отлично работает с элементом <tr>. Все, что вам нужно сделать, это включить его <tr draggable="true"> и зарегистрировать события 

dragstart
drag
dragenter
dragleave
dragover
drop
dragend

Я нашел эту статью очень полезной http://www.html5rocks.com/en/tutorials/dnd/basics/

!! Имейте в виду, что в этом html5 API есть недостаток, который вызывает событие, когда вы наводите курсор на дочерние элементы, даже если вас интересует только родительский элемент. Надеюсь, что html5rocks скоро исправят это.

1 голос
/ 23 августа 2012

Я сделал эту работу, используя JqueryUI со следующим: 

$(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>
0 голосов
/ 20 января 2012

Можно также установить css tr.ui-draggable-dragging {display: block} - таким образом можно перетаскивать строки, однако их координаты плохо рассчитаны. Я не нашел хорошего решения этой проблемы.

...