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

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

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

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

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

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

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

В этом примере включается перетаскивание строк для таблицы с id="table-1" и перетаскиваемым ячейкам назначается класс "myDragClass". Для работы примера необходимо подключить jQuery, плагин "Table drag and drop", файл со скриптом реализующим логику и файл со стилями:
Исходник файла table-dnd-example.js для этого примера: $(document).ready(function() { $("#table-1").tableDnD({ onDragClass: "myDragClass" }); });
Таблица из примера выглядит так:

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

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

	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, а также при наведении курсора на строчку выводим в первой ячейке иконку-подсказку (для этого добавляем/удаляем класс showDragHandle): $(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'); }); });

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

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

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

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

Чтобы получить возможность обработать массив строк необходимо повесить свою функцию на событие onDrop, делается это так:$(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 здесь простой, он просто отдает клиентской части строку, которую получил, предварительно ее отформатировав. В реальном случае входной массив придется сохранить. Rows:

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