Главная » 2012 » Октябрь » 15 » Таблица с эффектом drag'n'drop (Javascript)
15.10.2012, 01:12

Таблица с эффектом drag'n'drop




Данный скрипт позволяет перемещать содержимое ячеек таблицы с помощью известного всем эффекта drag'n'drop. Внизу таблицы присутствует окошко, показывающее, что вы делаете и правильно ли вы делаете (ну или то, что на вашем сайте завелся КЭП biggrin ). ДЕМО прилагается
1. В <head> подключите файлы js и css из прикрепленного архива.
Code
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <script type="text/javascript" src="drag.js"></script>

2. Вставьте код таблицы.
Code
<div id="drag">
  <table id="table1">
  <!-- define table columns -->
  <colgroup>
  <col width="320"/>
  <col width="320"/>
  </colgroup>
  <tr>
  <td><div id="link1" class="drag t1">1</div></td>
  <td><div id="link1" class="drag t1">2</div></td>
  </tr>
  <tr>
  <td><div id="link1" class="drag t1">3</div></td>
  <td><div id="link1" class="drag t1">4</div></td>
  </tr>
  <tr>
  <td><div id="link1" class="drag t1">5</div></td>
  <td></td>
  </tr>
  <tr>
  <td><div id="link1" class="drag t1">6</div></td>
  <td></td>
  </tr>
  <tr>
  <td><div id="link1" class="drag t1">7</div></td>
  <td></td>
  </tr>
  <tr>
  <td><div id="link1" class="drag t1"8</div></td>
  <td></td>
  </tr>
  <tr>
  <td><div id="link1" class="drag t1">9</div></td>
  <td></td>
  </tr>
  <tr>
  <td><div id="link1" class="drag t1">10</div></td>
  <td></td>
  </tr>
  <tr>
  <td><div id="link1" class="drag t1">11</div></td>
  <td></td>
  </tr>
  <tr>
  <td></td>
  <td></td>
  </tr>
  <tr>
  <td colspan="2" id="message" class="mark" title="Message line">русская адаптация by sold93</td>
  </tr>
  </table></div>

3. Перед </head> поставьте:
Code
<script type="text/javascript">
  // after page is loaded, initialize DIV elements inside tables
  window.onload = function () {
  // инициализация
  REDIPS.drag.init();
  // цвет выделения
  REDIPS.drag.hover_color = '#ffffff';
  REDIPS.drag.drop_option = 'switching';
  // показывает действие в строке сообщения
  REDIPS.drag.myhandler_clicked = function () {document.getElementById('message').innerHTML = 'Элемент успешно выделен'}
  REDIPS.drag.myhandler_moved = function () {document.getElementById('message').innerHTML = 'Перемещайте его. перемещайте его полностью!'}
  REDIPS.drag.myhandler_notmoved = function () {document.getElementById('message').innerHTML = 'Элемет не перемещен'}
  REDIPS.drag.myhandler_dropped = function () {document.getElementById('message').innerHTML = 'Элемент перемещен'}
  }
  </script>

4. Настраивайте под себя.
ГОТОВО!
Перевод на русский by sold93 специально для http://infoscript.ru
Материал взят с сайта infoscript.ru
Теги: Скачать Таблица с эффектом drag'n'drop
Скачать "Таблица с эффектом drag'n'drop"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: htmldrive.net
Категория: JavaScript's | Просмотров: 2012 | Добавил: sold93 | Рейтинг: 5.0/2 |
Теги: таблица, эффектом, drag'n'drop
Всего комментариев: 5
0  
1 -=WaMpIr=-   (15.10.2012 13:58) [Материал]
Аватар пользователя
По своей сути, drag'n'drop без cookies вообще бесполезная безделушка на сайте. dry

0  
2 sold93 -Infoscript Team-  (15.10.2012 19:38) [Материал]
Аватар пользователя
кому как

0  
3 -=WaMpIr=-   (15.10.2012 19:47) [Материал]
Аватар пользователя
Приведи пример использования этой функции без "печенек" и так, что бы она была хоть как-то полезна. happy

0  
4 sold93 -Infoscript Team-  (15.10.2012 21:32) [Материал]
Аватар пользователя
например - турнирная таблица. просто легче заполнить ее на сайте, а затем с помощью перетаскивания расставить по порядку (если ее приходится постоянно обновлять с изменением положения граф в таблице),сделать скрин и выложить. (из категории "а почему бы и нет". не суди за такой пример)

0  
5 -=WaMpIr=-   (16.10.2012 19:23) [Материал]
Аватар пользователя
А ну если так, то да, вполне удобно. happy

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]