Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery

Ромка — Пнд, 09/01/2008 - 23:31

В своем модуле "Адаптивное меню" я использовал очень удобный плагин для библиотеки jQuery, который позволяет сортировать ячейки таблиц, перетаскивая их мышью. Сейчас я хочу подробнее рассказать о возможностях этого плагина.

Для работы необходимо скачать последнюю версию библиотеки jQuery, последнюю версию плагина Table DnD. Также можно ознакомиться с официальной документацией к плагину.

Свойства "Table drag and drop"

После подключения, плагин добавляет к функционалу jQuery возможность использовать функцию tableDnD(), принимающую следующие параметры :

onDragStyle — CSS-стиль перетаскиваемой строки;
onDropStyle — стиль строки, после того как ее перетащили;
onDragClass — по сути то же что и onDragStyle, но вместо стилей указывается класс, содержащий необходимые стили;
onDrop — функция, выполняемая после того как строчку "бросили";
onDragStart — функция, выполняемая после того как строчку начали перетаскивать;
dragHandle — здесь определяется класс ячейки, за которую можно будет перетаскивать строчку. Если параметр не определен, то хватать строку можно будет за любую ячейку;
scrollAmount — число пикселей, на которое проскроллится страница, в случае если во время перетаскивания курсор дойдет до верхней или нижней границы страницы.

Простой пример работы

1	One	some text
2	Two	some text
3	Three	some text
4	Four	some text
5	Five	some text
6	Six	some text

В этом примере включается перетаскивание строк для таблицы с id="table-1" и перетаскиваемым ячейкам назначается класс "myDragClass". Для работы примера необходимо подключить jQuery, плагин "Table drag and drop", файл со скриптом реализующим логику и файл со стилями:

<?php
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablednd_0_5.js"></script>
<script type="text/javascript" src="table-dnd-example.js"></script>
<link type="text/css" rel="stylesheet" href="table-dnd-example.css" />
?>

Исходник файла table-dnd-example.js для этого примера:

<?php
$(document).ready(function() {
    $("#table-1").tableDnD({
      onDragClass: "myDragClass"
    });
});
?>

Таблица из примера выглядит так:

<?php
<table cellspacing="0" cellpadding="2" id="table-1"><tbody>
<tr id="1" style="cursor: move;" class="even-dnd"><td>1</td><td>One</td><td>some text</td></tr>
<tr id="2" style="cursor: move;" class="odd-dnd"><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="3" style="cursor: move;" class="even-dnd"><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="4" style="cursor: move;" class="odd-dnd"><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="5" style="cursor: move;" class="even-dnd"><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="6" style="cursor: move;" class="odd-dnd"><td>6</td><td>Six</td><td>some text</td></tr>
</tbody></table>
?>

Теперь немного более сложный пример — разрешаем перетаскивать строки только за крайнюю ячейку, в которой при наведении курсора выводится иконка-подсказка:

6	Six	some text
1	One	some text
2	Two	some text
3	Three	some text
4	Four	some text
5	Five	some text

Таблица из второго примера, обратите внимание на то, что первой ячейке каждой строки присвоен класс dragHandle:

<?php
<table cellspacing="0" cellpadding="2" id="table-2"><tbody>
<tr class="even-dnd"><td class="dragHandle"> </td><td>6</td><td>Six</td><td>some text</td></tr>
<tr class="odd-dnd"><td class="dragHandle"> </td><td>1</td><td>One</td><td>some text</td></tr>
<tr class="even-dnd"><td class="dragHandle"> </td><td>2</td><td>Two</td><td>some text</td></tr>
<tr class="odd-dnd"><td class="dragHandle"> </td><td>3</td><td>Three</td><td>some text</td></tr>
<tr class="even-dnd"><td class="dragHandle"> </td><td>4</td><td>Four</td><td>some text</td></tr>
<tr class="odd-dnd"><td class="dragHandle"> </td><td>5</td><td>Five</td><td>some text</td></tr>
</tbody></table>
?>

Этим скриптом разрешаем таскать строки только за ячейку с классом dragHandle, а также при наведении курсора на строчку выводим в первой ячейке иконку-подсказку (для этого добавляем/удаляем класс showDragHandle):

<?php
$(document).ready(function() {
    // Initialise the table
    $("#table-2").tableDnD({
      onDragClass: "myDragClass",
      dragHandle: "dragHandle"
    });
    
    $("#table-2 tr").hover(function() {
          $(this.cells[0]).addClass('showDragHandle');
    }, function() {
          $(this.cells[0]).removeClass('showDragHandle');
    });

});
?>

Передача данных на сервер

Без возможности сохранить сделанные пользователем изменения плагин был бы простой игрушкой. В этом примере клиентский скрипт передаст серверному информацию о последовательности строк и выведет на экран ответ сервера.

Тут будет ответ от сервера

1	One	some text
2	Two	some text
3	Three	some text
4	Four	some text
5	Five	some text
6	Six	some text

Для работы примера необходимо каждой строке присвоить уникальный id. В слое upd-dnd будет выводиться ответ сервера:

<?php
<div id="upd-dnd" style="position: relative; border: 1px solid #ccc; width: 300px; float: right; margin: 20px 10px 20px 20px; padding: 10px;">Тут будет ответ от сервера</div>
<table id="table-3"><tbody>
<tr id="table-3-row-1" class="even-dnd"><td>1</td><td>One</td><td>some text</td></tr>
<tr id="table-3-row-2" class="odd-dnd"><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="table-3-row-3" class="even-dnd"><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="table-3-row-4" class="odd-dnd"><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="table-3-row-5" class="even-dnd"><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="table-3-row-6" class="odd-dnd"><td>6</td><td>Six</td><td>some text</td></tr>
</tbody></table>
?>

Чтобы получить возможность обработать массив строк необходимо повесить свою функцию на событие onDrop, делается это так:

<?php$(document).ready(function() {
  // Initialise the table 3    
  $("#table-3").tableDnD({
    onDragClass: "myDragClass",
    onDrop: function(table, row) {
      var rows = table.tBodies[0].rows;
      var w = "";
      // В цикле создаем разделенный символом ";" список, в котором последовательно размещены id строк
      for (var i = 0; i < rows.length; i++) {
        w += rows[i].id + ";";
      }
      // Передаем данные на сервер
      $.ajax({
            type: "POST",
             url: "table-dnd-example.php",
             timeout: 5000,
             data: "w=" + w,
             success: function(data){$("div#upd-dnd").html(data);},
             error: function(data){$("div#upd-dnd").html("Error");}
         });
    }
  });
});
?>

PHP-backend здесь простой, он просто отдает клиентской части строку, которую получил, предварительно ее отформатировав. В реальном случае входной массив придется сохранить.

<?php
print "Rows:<br>" . str_replace(";", "<br>", $_POST['w']);
?>

Все примеры на одной странице тут.
Архив с примерами использования Table DnD.

А можно настроить так, чтобы

Snowcore (не проверено) → Пт, 02/06/2009 - 12:17

А можно настроить так, чтобы цвет строк менялся при перетаскивании? (в смысле соблюдалась зебра)

Это можно сделать следущим

Anonymous (не проверено) → Втр, 03/10/2009 - 01:40

Это можно сделать следущим способом:
Дописать к функции в событии onDrop код:

<?php
// найти все четные tr в в элемменте с id = table-1 и изменить цвет бэкграунда
 $("#table-1 tr:even").css({backgroundColor: "gray"});
// тоже самое только с нечетными tr
 $("#table-1 tr:odd").css({backgroundColor: "black"});
?>

А можно ли сделать так, чтобы

Виталик (не проверено) → Ср, 05/06/2009 - 15:47

А можно ли сделать так, чтобы после окончания перетаскивания элементы не сдвигались на 1 позицию, а менялись местами? Типа, я взял 6-й элемент и перетащил его на место 2-го. При этом 2-й должен стать на место 6-го.

ответить
quote
-59 points

Как раскрасить в шахматный

Сергей (не проверено) → Пт, 05/08/2009 - 11:58

Как раскрасить в шахматный порядок таблицу?

ответить
quote
-13 points

table { } td, th { } th

GGSimon (не проверено) → Сб, 04/24/2010 - 00:54

table {

}
td, th {

}
th {

}
td {

}
.even {
//тут цвет нужный для каждой второй строки
}

-------------------------------------------------------

$(document).ready(function( ) {
$('table.striped tr:even').addClass('even');
});

-------------------------------------------------------

ответить
quote
-25 points

Перетаскивание нескольких строк

Anonymous (не проверено) → Ср, 12/23/2009 - 21:15

А как перетащить сразу несколько строк, выделенных, например, через ctrl?

ответить
quote
-26 points

Хорошая статья. то что мне

Anton as T3Leads (не проверено) → Сб, 12/26/2009 - 19:05

Хорошая статья. то что мне надо. Спасибо.

ответить
quote
-42 points

Re

Jessica24 (не проверено) → Втр, 12/29/2009 - 07:52

Did you ever hear about freelance writing jobs ? I want to say that the stuff just about this post is very hot! Thank you for producing that!

ответить
quote
-36 points

Спасибо за информацию

Anonymous (не проверено) → Чт, 03/11/2010 - 12:03

Спасибо за информацию классный плагин. Жалко, что этот плагин дальше не развивается. Очень было бы прикольно если бы была поддержка перетаскивания в другую таблицу таким образом можно было бы делать под категории. А нету других похожих плагинов?

ответить
quote
-55 points

спс за статью

Дмитрий (не проверено) → Сб, 03/13/2010 - 17:39

спс за статью

ответить
quote
-44 points

Материал суперовый.

Anonymous (не проверено) → Ср, 12/08/2010 - 15:12

Большое спасибо автору! +1 в закладки

ответить
quote
-16 points

самое обидное что єто не

anna (не проверено) → Втр, 12/14/2010 - 17:34

самое обидное что єто не работает с динамически добавленными строками :(

ответить
quote
-21 points

Работает. После добавления

Anonymous (не проверено) → Пт, 01/28/2011 - 02:44

Работает. После добавления нужно повторно вызвать метод $().tableDnD. А вот метод $().tableDnDUpdate, который описан в мануале, не работает. Да, и добавлять строки в таблицу можно только через appendChild(), а не innerHTML, иначе вообще никакой скрипт не будет работать нормально.

ответить
quote
-23 points

А я вот думаю...

Rantie (не проверено) → Втр, 01/11/2011 - 01:29

как бы сделать так чтобы эта хрень, работала следующим образом, есть родительские строки, а есть дочерние.. вот как сделать так чтобы родительскую берешь, она вместе с дочерними перемещалась.

Пойду рыться в коде и перепаивать плагин. Если у кого есть быстрое решение скиньте плз на мыло.

Кстати для комментов полезно было бы сделать чтобы http:// прописывались сами если не введено )))

ответить
quote
-29 points

Вложенные таблицы по идее

Anonymous (не проверено) → Пт, 01/28/2011 - 02:55

Вложенные таблицы по идее должны работать. Зачем изобретать велосипед?

ответить
quote
-21 points

а из вложенной в родительскую

Rantie (не проверено) → Пнд, 01/31/2011 - 01:33

а из вложенной в родительскую тоже должно работать?

ответить
quote
-14 points

Мысль такая...после переноса

zinny (не проверено) → Пт, 05/13/2011 - 09:30

После

№ | username |
1 | user6 |
2 | user1 |
...

ответить
quote
-20 points

zinny, если получилось

nik_neman (не проверено) → Втр, 11/15/2011 - 12:34

zinny, если получилось изменить порядковый номер - то объясните, пожалуйста, как сделали.
Очень нужно.
Заранее спасибо.
Ответ можно и на почту - nik_neman@mail.ru

Сохранение порядка строк

Мурад (не проверено) → Втр, 05/24/2011 - 22:10

А можно более простым способом реализовать сохранение порядка строк (сработает для РНР):

в каждой строке таблицы, в любом месте добавляем

<?php<input type='hidden' name="order[]=<?=$row->id?>" />?>

Таким образом при отправке формы данные придут на сервер в порядке расположения строк:

<?php$_POST['order'][0] == 2; $_POST['order'][1] == 3; $_POST['order'][2] == 1;?>

ответить
quote
-18 points

respond this topic

loan (не проверено) → Вс, 09/04/2011 - 07:47

Some time before, I needed to buy a building for my organization but I did not have enough cash and could not order something. Thank God my brother proposed to try to take the business loans from trustworthy bank. Therefore, I acted that and was happy with my collateral loan.

ответить
quote
-10 points

Подскажите как получить

One (не проверено) → Пт, 09/09/2011 - 10:39

Подскажите как получить массив строк в случаи если таблица:

<?php
<table id="table-4" cellspacing="0" cellpadding="2">
<tbody>
<tr class="nodrop nodrag">
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>

<tr id="1">
<td>1</td>
<td>1</td>
<td>
</tr>

<tr id="2">
<td>2</td>
<td>2</td>
<td>
</tr>

</tbody>

<tbody>
<tr class="nodrop nodrag">
<th>H1</th>
<th>H2</th>
<th>H3</th>

</tr>
<tr id="3">
<td>3</td>
<td>3</td>
</tr>

<tr id="4">
<td>4</td>
<td>4</td>
<td>
</tr>
</tbody>

<tbody>

<tr class="nodrop nodrag">
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>

<tr id="5">
<td>5</td>
<td>5</td>
<td>
</tr>
<tr id="6">
<td>6</td>
<td>6</td>
<td>
</tr>
</tbody>
</table>
?>

при таком подсчете строк

<?php
      for (var i = 0; i < rows.length; i++) {
        w += rows[i].id + ";";
      }
?>

Получаю: ;1;2;

ответить
quote
-10 points

несколько td в строчке

nik_neman (не проверено) → Втр, 11/15/2011 - 11:45

День добрый.
Вот допустим у меня такая структура таблицы:

1
2
3

4
5
6

Как сделать чтобы менялись ячейки 1 и 3 допустим?
Точней чтобы менялись ни а .
Заранее спасибо.

Здравствуйте! Подскажите

Sheldon (не проверено) → Пнд, 01/16/2012 - 17:20

Здравствуйте! Подскажите можно ли реализовать используя этот плагин следующее:
Есть таблица состоящая из 10 столбцов и 5 строк, первоя строка фиксрированная (названия самих столбцов), в остальных 1-4 строках данные будут меняться переодически...
Можно ли реализовать так чтобы изменять, т.е. редактировать сами данные и перетаскивать мог только я (например, по поролю)?
п.с. с нетерпением ужду вашего ответа, спасибо...
п.п.с. еще одно спасибо за оличный сайт. :)

Отправить комментарий

Ваше имя:

E-mail:

Содержание этого поля является приватным и не предназначено к показу.

Домашняя страница:

Тема:

Комментарий: *

Доступны HTML теги: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
Строки и параграфы переносятся автоматически.
Вы можете использовать тэг <code></code> для подсветки синтаксиса программного кода. The supported tag styles are: <foo>, [foo].
You may quote other posts using [quote] tags.

Подробнее о форматировании

Уведомлять меня о новых комментариях

Все комментарии

Ответы на мои комментарии

CAPTCHA

Если вы человек, а не робот, то введите текст с картинки. Если вы робот, то велкам ту майкрософт.ком.