Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 4. Как сделать так, чтобы вас уважали и ценили?
Как сделать лучше себе и другим людям
Как сделать свидание интересным?
Категории:
АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника
Задание. Реализовать функцию перемещения элементов веб - страницы между группой контейнерами, в следующих вариантах: все элементы могут свободно перемещаться между
|
|
Реализовать функцию перемещения элементов веб - страницы между группой контейнерами, в следующих вариантах:
- все элементы могут свободно перемещаться между тремя контейнерами;
- ряд элементов, относящихся к одному классу нельзя перенести в один из контейнеров;
- элементы не могут быть возвращены в контейнер, в котором находились первоначально;
Ход работы
В качестве примера, создадим два контейнера, в один из которых (источник) поместим три элемента, элементы можно будет свободно перемещать из контейнера - источника, в целевой контейнер и обратно.
Для этого необходимо:
- Создать контейнеры и элементы для перемещения.
- Стилизовать элементы веб - страницы.
- Создать функции для обработки следующих событий:
- перетаскивание объекта внутрь границ элемента;
- прохождение курсора "над" элементом во время осуществления операции перемещения;
- "освобождение" перетаскиваемого элемента в пределах элемента - цели;
- начало операции перемещения;
- окончание операции перетаскивания.
Создание элементов страницы для перемещения
Для того, чтобы можно было перемещать элемент в рамках страницы, достаточно просто добавить атрибут draggable= true. Создадим контейнеры для размещения элементов и элементы для последующего перемещения:
<div id="source" class="conteiner" > <div id="firstDragElement" class="element" draggable="true">Text 1</div> <div id="secondDragElement" class="element" draggable="true">Text 2</div> <div id="thirdDragElement" class="element" draggable="true">Text 3</div></div> <div id="target" class="conteiner"></div>Пример 20.1. (html, txt)
Date: 2015-07-22; view: 1036; Нарушение авторских прав