Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный
Практическая работа 4:

Drag and Drop

Аннотация: В рамках данного практического занятия мы рассмотрим основные методы и приемы организации drag and drop в пределах HTML - страницы

Целью практического занятия является формирования навыков работы с методами и элементами разметки, позволяющими менять местоположение любых элементов страницы при помощи мыши, на основе событийного механизма и JavaScript API, определенных спецификацией HTML5.

Задание

Реализовать функцию перемещения элементов веб - страницы между группой контейнеров, в следующих вариантах:

  • все элементы могут свободно перемещаться между тремя контейнерами;
  • ряд элементов, относящихся к одному классу нельзя перенести в один из контейнеров;
  • элементы не могут быть возвращены в контейнер, в котором находились первоначально;

Ход работы

В качестве примера, создадим два контейнера, в один из которых (источник) поместим три элемента, элементы можно будет свободно перемещать из контейнера - источника, в целевой контейнер и обратно.

Для этого необходимо:

  1. Создать контейнеры и элементы для перемещения.
  2. Стилизовать элементы веб - страницы.
  3. Создать функции для обработки следующих событий:
    • перетаскивание объекта внутрь границ элемента;
    • прохождение курсора "над" элементом во время осуществления операции перемещения;
    • "освобождение" перетаскиваемого элемента в пределах элемента - цели;
    • начало операции перемещения;
    • окончание операции перетаскивания.

Создание элементов страницы для перемещения

Для того, чтобы можно было перемещать элемент в рамках страницы, достаточно просто добавить атрибут 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.

Стилизация элементов

Для простоты восприятия примера, создадим следующие стили для элементов:

.element {
border: 2px solid black; 
height: 50px; 
width: 50px; 
margin-left:20px; 
margin-bottom: 10px; 
text-align:center;
}
            
.conteiner {
border: 2px solid red; 
height: 200px; 
width: 100px; 
float:left; 
margin: 50px;
 }
20.2.

В результате, после привязки CSS к HTML - документу, получим следующее:

Макет для реализации Drag and drop

Рис. 20.1. Макет для реализации Drag and drop
Сергей Крупко
Сергей Крупко
Как оплатить курс?
Галина Башкирова
Галина Башкирова
Темы Вкр для проф. переподготовки Профессиональное веб-программирование
Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989