В небольшой задаче сегодня нужно было осуществить сортировку таблиц. До этого решения были в лоб: поля ввода куда пользователь вводил порядковый номер строки, стрелочки «вниз-вверх». Всё бы ничего, но вот в сегодняшней задаче одно из условий требовало обновления кэша (строки таблиц) при каждом обращении к сортировке таблицы (изменил порядковый номер строки — обновляй кэш), поэтому «лобовые» методы не подошли. Да и пользователи системы часто жаловались на неудобства «лобных» методов сортировки.

«Погуглив», нашёл, на мой взгляд, отличное решение для jquery. Итак, плагин TableDnD.

Подключаем плагин как обычно. Инициализируем:

$(document).ready(function() {
$(признак-таблицы).tableDnD(); // инициализация плагина
});


Собственно всё. У плагина есть несколько функций:
onDragStyle — стиль строки при перетаскивании

onDropStyle — стиль строки при «дропе»

onDragClass — как бы замена двух функций выше, стиль меняется при перетаскивании и удаляется при «дропе» и строка приобретает изначальный стиль

onDrop — возможность вызвать свою функцию при «дропе»

onDragStart — возможность вызвать свою функцию в начале перетаскивания

scrollAmount — пока не понял что это.

Простой пример:

$(document).ready(function() {
$("признак-таблицы").tableDnD(); // инициализация плагина
$("признак-таблицы").tableDnD({
onDragClass: "DuringDragStyle" // при перетаскивании строка получит "красивости" класса DuringDragStyle
});
});

После этого строки таблицы можно «таскать» вверх или вниз в пределах таблицы. Таблиц на странице может быть сколько угодно. Особенность плагина в том что он не использует ui.draggable.js и иже с ним.

Более подробно можно почитать у авторов плагина (англ.).

Скачать плагин — 6кб