Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17120 / 1587 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Практическая работа 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
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Ольга Плугарь
Ольга Плугарь
Россия, Югорск ХМАО-Югра
Павел Боткин
Павел Боткин
Украина, Мариуполь