Эта история произошла с Дмитрием Дубовицким — программистом «Бюро Пирогова».
Однажды случилось мне заниматься одним весьма интересным проектом. По ТЗ нужно было заполнить расписаниие занятий фитнес-клуба в неком XML. В принципе, ничего сложного — прочитал XML, заполнил данными таблицу на экране, но… Как же клиент будет редактировать расписание и править xml-файл? руками?
Выход прост — это можно сделать мышью!
Тут и начинается самое интересное!
Дело в том, что на каждый урок могут быть разные инструктора, разные спортивные залы в клубе, не говоря уже про различные названия занятий — по сути это обыкновенные списки, которые изо дня в день заполняются множеством подобных организаций.
Возникла интересная идея — а почему бы не сделать так, чтобы все графы таблицы (имя инстурктора, название программы, зал) можно было перетаскивать прямо на клетку с занятием?
Красиво и технично.
Реализовать это не так уж сложно.
Для начала заполните страницу «скелетом»: времена и дни недели в таблице будут проставляться динамически.
Чтобы не мучаться посмотрите сразу на первоисточник или всё целиком
скелет содержимого страницы:
и код jquery c необходимыми функциями. Нужно вставить в функцию $(document).ready():
В итоге, мы получем возможность перетаскивать самих инструкторов, залы и занятия!
Конечно, решение пока сырое, еще надо реализовать удаление, замещение и прочие фишки, однако, задумка уже реализована.
PS: Справка от первоисточника:
jqueryui.com/demos/droppable
jqueryui.com/demos/draggable
Однажды случилось мне заниматься одним весьма интересным проектом. По ТЗ нужно было заполнить расписаниие занятий фитнес-клуба в неком XML. В принципе, ничего сложного — прочитал XML, заполнил данными таблицу на экране, но… Как же клиент будет редактировать расписание и править xml-файл? руками?
Выход прост — это можно сделать мышью!
Тут и начинается самое интересное!
Дело в том, что на каждый урок могут быть разные инструктора, разные спортивные залы в клубе, не говоря уже про различные названия занятий — по сути это обыкновенные списки, которые изо дня в день заполняются множеством подобных организаций.
Возникла интересная идея — а почему бы не сделать так, чтобы все графы таблицы (имя инстурктора, название программы, зал) можно было перетаскивать прямо на клетку с занятием?
Красиво и технично.
Реализовать это не так уж сложно.
Для начала заполните страницу «скелетом»: времена и дни недели в таблице будут проставляться динамически.
Чтобы не мучаться посмотрите сразу на первоисточник или всё целиком
скелет содержимого страницы:
<body>
<table id="timetable" width="1100" border="1" align="center" >
<tbody><tr><th>Время</th></tr></tbody>
</table>
<ul class="programs">
<li>Abs-30</li>
...
<li>Jazz</li>
</ul>
<ul class="zals">
<li>Зал восточных единоборств</li>
<li>Зал групповых программ</li>
</ul>
<ul class="instructors">
<li>Артем</li>
...
<li>Ксюша</li>
</ul>
</body>
* This source code was highlighted with Source Code Highlighter.и код jquery c необходимыми функциями. Нужно вставить в функцию $(document).ready():
$('ul.instructors, ul.zals, ul.programs').draggable();
//Делаем списки перемещаемыми
// вложеннные друг в друга draggable элементы некорректо ведут себя в IE
// поэтому перепишем так:
if (!$.browser.msie) {$('ul.instructors, ul.zals, ul.programs').draggable();}
$("ul.programs li, ul.instructors li, ul.zals li").draggable({revert: 'invalid', zIndex: 10});
// делаем элементы списков перетаскиваемыми
// опция "revert: 'invalid'" плавно возращает элемент обратно, если он не попал в клетку таблицы
// Каждую клетку таблицы делаем способной принимать перемещаемые элементы
// Делается это с помощью метода droppable
// В свойстве accept указываем какие элементы может принимать ячейка таблицы (это программы, инструкторы и залы)
$("#timetable td").droppable({accept: "ul.programs li, ul.instructors li, ul.zals li",
hoverClass: "hover", // CSS класс, ассоциирующийся с одной ячейкой, которая будет принимать перетаскиваемый элемент
drop: function(event, ui) { // Функция, вызываемая после перетаскивания
var class_to_find=''; // Уточним, с каким из трех элементов мы работали.
if ($(ui.draggable).parent().hasClass('instructors')) class_to_find='instructor';
if ($(ui.draggable).parent().hasClass('programs')) class_to_find='program';
if ($(ui.draggable).parent().hasClass('zals')) class_to_find='zal';
// Обращаемся к элементу ui.draggable - это перетаскиваемый элемент (li).
// .parent() - обращаемся по цепочке DOM наверх, к элементу ul.
// У каждого элемента ul есть класс, определяющий, что находится в списке.
// Присваиваем переменной class_to_find значение этого класса
$(this).find('div.'+class_to_find).html($(ui.draggable).text()).css('display','none').fadeIn();
// $(this) - обращаемся к ячейке.
// так как структура ячейки у нас такая:
//
// <div class="instructor"/>
// <div class="program"/>
// <div class="zal"/>
//
// то ищем div с классом, который мы определили в переменной class_to_find
// И присваем текст div`у
// который берем из объекта ui.draggable методом text()
//
// А методами .css('display','none').fadeIn(); добавляем эффект плавного появления.
// Возвращаем перетаскиваемый элемент на его исходную позицию
$(ui.draggable).css('top','auto').css('left','auto');
// Еще один маленький штрих - когда в ячейке все три поля заполнены, добавляем ей сверху в левом верхнем углу "+" с помощью добавления класса ячейке.
if (($(this).find('div.instructor').text()!='') &&
($(this).find('div.program').text()!='') &&
($(this).find('div.zal').text()!=''))
{$(this).addClass('added'); }
// Если заполнены все поля, то добавляем ячейке класс 'added'
}
});
* This source code was highlighted with Source Code Highlighter.В итоге, мы получем возможность перетаскивать самих инструкторов, залы и занятия!
Конечно, решение пока сырое, еще надо реализовать удаление, замещение и прочие фишки, однако, задумка уже реализована.
PS: Справка от первоисточника:
jqueryui.com/demos/droppable
jqueryui.com/demos/draggable