drag and drop

Вы находитесь на устаревшей версии сайта romka.eu. Она оставлена здесь на случай если я захочу поностальгировать по тому как выглядел интернет в 2012 году :) Так этот сайт выглядел с июня 2012 по февраль 2023. Эта версия сайта не обновляется, комментирование материалов отключено. Обновленная версия сайта доступна по адресу http://romka.eu.

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

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

Ромка аватар
12754
Vote up!
В своем модуле "Адаптивное меню" я использовал очень удобный плагин для библиотеки 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
Subscribe to RSS - drag and drop