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

Функциональность jQuery draggable, похоже, не работает с таблицами (в 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) и б) как правильно получить перетаскиваемые строки таблицы.

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


drag-and-drop jquery css html-table
person cdleary    schedule 21.11.2008    source источник
comment
У вас есть дополнительное пространство в каждом из ваших селекторов? После каждого div и перед точкой не должно быть пробела. Например, ваш первый селектор соответствует элементам с class=table внутри div...   -  person Prestaul    schedule 21.11.2008
comment
Исправил, спасибо, но это ничего не изменило. :(   -  person cdleary    schedule 21.11.2008

Ответы (6)


arrow_upward
22
arrow_downward

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

А если вы хотите перетаскивать строки внутри таблицы, этот JQuery + библиотека "draggable row table" отлично работает в FireFox3

person VonC    schedule 21.11.2008
comment
Упс, исправлено расположение стола. - person cdleary; 21.11.2008
comment
не знаю, намеренно ли, но ваш ответ полностью рифмован :) - person Andres Ilich; 20.01.2012
comment
@AndresIlich Я попытался еще раз взглянуть на этот ответ, / Надеясь уловить в нем рефрен / Это проиллюстрировало бы некоторую способность / в умении писать по-английски / Но я обнаружил, что усилия совершенно напрасны. (english.blogoverflow.com/2011/11/) - person VonC; 20.01.2012
comment
@VonC, могу я попросить вас взглянуть на вопрос jquery по другой теме здесь: stackoverflow.com/questions/13137404/? - person Istiaque Ahmed; 31.10.2012
comment
@IstiaqueAhmed, к сожалению, jquery не моя сильная сторона (как показывают мои теги: stackoverflow.com/users/6309/vonc? tab=теги). вам лучше попытаться связаться с одним из гуру: stackoverflow.com/tags/jquery/topusers - person VonC; 31.10.2012

arrow_upward
35
arrow_downward

Существует также способ сделать строки таблицы перетаскиваемыми с помощью пользовательского интерфейса JQuery. Все, что вам нужно сделать, это установить вспомогательную опцию для функции, возвращающей новый 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/

person Ariel Popovsky    schedule 09.02.2010
comment
хорошая техника! при использовании этого не забывайте, что любые обратные вызовы drop для ваших элементов $.droppable() могут по-прежнему ссылаться на свойство ui.draggable, чтобы нацеливаться на исходный элемент строки. поэтому вам не нужно жертвовать какой-либо функциональностью при использовании слегка напуганного помощника (надеюсь, это имеет смысл) - person Jordan Sitkin; 04.05.2011
comment
Есть ли хороший метод, который не клонирует элемент tr? Теперь он показывает как исходную, так и клонированную строку таблицы, что немного сбивает пользователя с толку. - person Andrei; 21.01.2012
comment
Я не уверен, возможно ли это, но как насчет добавления класса css в исходную строку и выделения его серым цветом или чего-то еще во время перетаскивания? - person Ariel Popovsky; 23.01.2012

arrow_upward
11
arrow_downward

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

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

Просто я?

person Enigma Plus    schedule 18.04.2012

arrow_upward
3
arrow_downward

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

dragstart
drag
dragenter
dragleave
dragover
drop
dragend

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

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

person Rn2dy    schedule 06.05.2013

arrow_upward
1
arrow_downward

Я сделал эту работу, используя 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>

person sevmusic    schedule 23.08.2012

arrow_upward
0
arrow_downward

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

person Andrei    schedule 20.01.2012