Pull to refresh

Удобное заполнение расписаний с JQuery

Reading time 5 min
Views 7.1K
Эта история произошла с Дмитрием Дубовицким — программистом «Бюро Пирогова».

Однажды случилось мне заниматься одним весьма интересным проектом. По ТЗ нужно было заполнить расписаниие занятий фитнес-клуба в неком XML. В принципе, ничего сложного — прочитал XML, заполнил данными таблицу на экране, но… Как же клиент будет редактировать расписание и править xml-файл? руками?
Выход прост — это можно сделать мышью!

Тут и начинается самое интересное!
Дело в том, что на каждый урок могут быть разные инструктора, разные спортивные залы в клубе, не говоря уже про различные названия занятий — по сути это обыкновенные списки, которые изо дня в день заполняются множеством подобных организаций.
Возникла интересная идея — а почему бы не сделать так, чтобы все графы таблицы (имя инстурктора, название программы, зал) можно было перетаскивать прямо на клетку с занятием?
image
Красиво и технично.

Реализовать это не так уж сложно.
Для начала заполните страницу «скелетом»: времена и дни недели в таблице будут проставляться динамически.

Чтобы не мучаться посмотрите сразу на первоисточник или всё целиком

скелет содержимого страницы:
<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
Tags:
Hubs:
-2
Comments 17
Comments Comments 17

Articles

Information

Website
pirogov.ru
Registered
Founded
Employees
Unknown
Location
Россия