Опубликован: 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
Сергей Крупко
Сергей Крупко

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия