Ромка!eu

  • Отдых
  • Работа
Главная — Блоги — Ромка's blog

Это старая (Drupal 6) версия сайта romka.eu. Она больше не обновляется, комментирование материалов отключено. Обновленная версия сайта доступна по адресу http://romka.eu.

Перетаскивание строк таблицы. 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');
    });

});
?>



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

Без возможности сохранить сделанные пользователем изменения плагин был бы простой игрушкой. В этом примере клиентский скрипт передаст серверному информацию о последовательности строк и выведет на экран ответ сервера.
Тут будет ответ от сервера
1Onesome text
2Twosome text
3Threesome text
4Foursome text
5Fivesome text
6Sixsome 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.

  • drag and drop
  • jquery
  • Штуки-дрюки
  • Ромка's blog

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

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-го.

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

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

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

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');
});

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

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

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

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

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

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

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

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!

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

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

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

спс за статью

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

спс за статью

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мысль такая...после переноса строки его порядковый номер меняется- как это сделать??
Напрмер:
ДО
№ | username |
1 | user1 |
....
6 | user6 |

После

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

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;?>

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.

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

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;

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

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

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

1
2
3

4
5
6

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

Просьба помочь. Не могу

Роман (не проверено) → Чт, 02/23/2012 - 14:50

Просьба помочь. Не могу понять, почему не работает изменение фона после перетаскивания строки

tr.myDropClass td{
background-color: #FF9900;
}

Обо мне

Всем привет!
Меня зовут
Роман Архаров, я профессиональный веб-разработчик, программирую на языках PHP, Python и Action-Script, в работе использую фреймворки Drupal и Django. В этом блоге я размещаю заметки и статьи, связанные с моей работой, отдыхом и другими интересными мне темами.

Похожие заметки

  • Автоматическая "газетная" верстка (верстка в несколько колонок)
  • Вращение изображений при помощи Javascript
  • Получение заголовков (HTTP-headers) страницы при помощи Java-script
  • Tagnetic — холодильник тэгов
  • Баг jQuery в Firefox 3 и WebKit

Популярные заметки

  • Авторизация на Drupal-сайте с помощью аккаунта ВКонтакте
  • Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery
  • Темизация Drupal. Часть 3. Основы Drupal Forms API и темизация форм
  • Темизация Drupal. Часть 4. Темизация Views
  • AJAX. Обмен данными между клиентом и сервером, закачка на сервер файлов без перезагрузки страницы при помощи библиотеки jQuery.
  • Кеширование на Drupal-сайте. Сравнение встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Varnish
  • Тестирование модуля "Inner poll"
  • Несколько панорам из путешествия по Перу и Боливии
  • Arduino + bluetooth, небольшая проблема
  • Пример разработки плагина для модуля CCK

Подписка


Последние комментарии

  • drupal-admin → Кеширование на Drupal-сайте. Сравнение эффективности встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Var → Отличная статья
  • Меховщиков Руслана → Проверка имени пользователя на наличие букв из разных алфавитов → Re: Читал про это уже на
  • Вероника → Куба. Лето 2008. Часть 3 → По поводу "приветливых жителей" Тринидада
  • Sfero → Статья в PC Magazine/RE. Drupal: разработка модуля → Немного о контенте
  • RemaGe → Статья в PC Magazine/RE. Drupal: разработка модуля → -)
  • Ромка → Статья в PC Magazine/RE. Drupal: разработка модуля → Да, будет сборка, та которую
  • RemaGe → Статья в PC Magazine/RE. Drupal: разработка модуля → -)
  • anatinge → Поездка в Киев → спасибо :)
  • Ромка → Поездка в Киев → Да, в общем-то, ничего
  • GogA → Поездка в Киев → Заинтриговал, что там за

Новые заметки

  • Кеширование на Drupal-сайте. Сравнение встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Varnish
  • Любопытное поведение модуля syslog в шестом Друпале (баг?)
  • Arduino + bluetooth, небольшая проблема
  • Гугл 1 марта прекратил поддержку сервиса Google Friend Connect
  • Проба пера в HTML5 + canvas. Эффект ластика
  • Шесть рукопожатий
  • Доклад на DrupalConfMoscow 2011
  • Статусы разных сущностей в Друпале 6
  • Футер, прибитый к низу страницы
  • Путешествие по Перу и Боливии. Часть 2

Тэги

Drupal jquery Куба Лето 2007 Лето 2008 Отдых Работа Штуки-дрюки лето модуль статья цитата
еще тэги

Навигация

  • Exchange rate
  • Переход по внешней ссылке
  • Последние сообщения
  • Фотогалереи

Курсы валют

  • 100 Казахстанских тенге — 21,3687 (-0.43)
  • 10 Украинских гривен — 27,2852 (-13.04)
  • 1 Китайский юань — 10,2706 (-40.98)
  • 100 Японских иен — 53,5332 (+12.67)
  • 1 Доллар США — 65,6210 (+33)
  • 1 Евро — 69,8076 (+29.42)
  • 10000 Белорусских рублей — 36,3310 (-2.51)
  • 1 Турецкая лира — 22,9540 (+4.99)

10 случайных заметок

  • Май 2006. Сочи, Адлер, Геленджик, Анапа, Керчь, Судак, Ялта, Севастополь.
  • Цитата
  • Рассуждение на тему «Сколько стоит сайт?»
  • Зима 2010. Поездка в Тайланд, Индонезию и Сингапур. Часть 0
  • Еще одна очень меткая картинка
  • Лето 2007. Путешествие в Камбоджу – Таиланд – Малайзию. Часть 7. Бангкок.
  • Статья в журнале PC Magazine
  • Странное поведение Java-script в IE. Один и тот же скрипт в Firefox работает, а в IE – нет.
  • Зима 2010. Поездка в Тайланд, Индонезию и Сингапур. Часть 1 — Пхукет и Джакарта
  • Эксперименты с вКонтакте API

Случайные фото

Экзотическое меню в аэропорту :))
Бронзовое море
В пути
Дольмен
Градиент
Вечерний Копенгаген
Осло, Карл Юхан Гате
Вид на Бангкок с верхушки отеля Байок
Я на
Вид на Мраморную церковь с площади Амалиенборг
Еще горы
Насыпь между Кайо Санта Мария и Кубой
Дерево в Прамбанане
Я и разноцветные рыбы
Горы
Закат в Гаване
  • Отдых
  • Работа

При использовании материалов с сайта, пожалуйста, ставьте ссылку на источник. E-mail для связи: mne@romka.eu.