JQuery EasyUI падение - Создание школьной программы
Этот учебник покажет вам, как создать школьную программу с помощью JQuery EasyUI. Мы создадим две таблицы: школьные предметы, отображаемые слева, чтобы отобразить график справа. Вы можете перетащить и школьные предметы размещены на графике ячейки. Школьные предметы является <DIV класс = "элемент"> элемент, клетка представляет собой график <класс TD = "падение"> элемент.
Показать школьные предметы
<Div класс = "левый"> <Таблица> <Tr> <TD> <DIV класс = "пункт"> Английский </ DIV> </ TD> </ TR> <Tr> <TD> <DIV класс = "пункт"> Наука </ DIV> </ TD> </ TR> <! - Другие темы -> </ Table> </ Div>
Показать хронологию
<Div класс = "вправо"> <Таблица> <Tr> <Td класс = "пустой"> </ TD> <Td класс = "название"> понедельник </ TD> <Td класс = "название"> вторник </ TD> <Td класс = "название"> среда </ TD> <Td класс = "название"> четверг </ TD> <Td класс = "название"> Пятница </ TD> </ TR> <Tr> <Td класс = "время"> 8:00 </ TD> <Td класс = "падение"> </ TD> <Td класс = "падение"> </ TD> <Td класс = "падение"> </ TD> <Td класс = "падение"> </ TD> <Td класс = "падение"> </ TD> </ TR> <! - Другие клетки -> </ Table> </ Div>
Перетащите слева от школьных предметов
$ ( '. Левый .item'). Draggable ({ вернуться: правда, прокси: 'клон' });
Школьные предметы, помещенные в ячейку по расписанию
$ ( '. Правый td.drop'). Droppable ({ OnDragEnter: функция () { $ (Это) .addClass ( 'над'); }, OnDragLeave: функция () { $ (Это) .removeClass ( 'над'); }, OnDrop: функция (е, источник) { $ (Это) .removeClass ( 'над'); если ($ (источник) .hasClass ( 'Assigned')) { $ (Это) .append (источник); } Else { вар с = $ (источник) .clone () addClass ( 'назначен') .; $ (Это) .empty () Append (с) .; c.draggable ({ вернуться: правда }); } } });
Как вы можете видеть в коде выше, когда пользователь перетаскивает на левой стороне школьных предметов и помещен в ячейку в расписании, функция обратного вызова OnDrop будет называться. Мы клонировали исходный элемент сопротивления с левой стороны и прикрепить его к графику ячейки. Когда вытащили из школьного предмета графика ячейки в другую ячейку, просто переместить его в положение.