Теоретическое обоснование

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

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

- создать контейнеры и элементы для перемещения;

- стилизовать элементы Web-страницы;

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

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

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

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

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

.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;

Создание JavaScript-функции

Отслеживать процесс Drag and drop позволяют следующие события: dragstart; drag; dragenter; dragleave; dragover; drop; dragend.

События dragenter, dragover и dragleave можно использовать для того, чтобы сделать процесс переноса более наглядным.

Для обработки процесса бросания элемента, надо назначить обработчик событий drop и dragend. В нем надо отменить поведение браузера по умолчанию, т.к. это может быть переход на другую страницу.

Объект DataTransfer хранит данные отсылаемые в процессе перетаскивания. DataTransfer задается в событии dragset и используется в событии drop. Вызов e.dataTransfer.setData(format, data) устанавливает mimetype и данные нужные для перетаскивания.

Свойство dataTransfer имеет функцию getData(format) для получения сохраненных данных.

Свойство dataTransfer предоставляет возможность тонкой настройки отображения процесса переноса:

- dataTransfer.effectAllowed – эффект, поддерживаемый целевым элементом перетаскивания. Как правило, это значение задается обработчиком события dragstart. Может принимать следующие значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized;

- dataTransfer.dropEffect – эффект, выбранный пользователем или целевым элементом. Может принимать следующие значение: none, copy, link, move;

- dataTransfer.setDragImage(i, x, y). Вместо того чтобы использовать при перетаскивании полупрозрачную картинку по умолчанию

Алгоритм создания функций:

function dragStart(ev)

{

ev.dataTransfer.effectAllowed='link';

ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));

ev.dataTransfer.setDragImage(ev.target,0,0);

return true;

}

function dragEnter(ev)

{

var idelt = ev.dataTransfer.getData("Text");

return true;

}

function dragOver(ev)

{

var idelt = ev.dataTransfer.getData("Text");

var id = ev.target.getAttribute('id');

return false;

}

function dragEnd(ev)

{

ev.dataTransfer.clearData("Text");

return true

}

function dragDrop(ev)

{

var idelt = ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(idelt));

ev.stopPropagation();

return false;

}

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

<div id="source" class="conteiner" ondragenter="return dragEnter(event)"

ondrop="return dragDrop(event)" ondragover="return dragOver(event)">

<div id="firstDragElement" class="element" ondragstart="return dragStart(event)"

ondragend="return dragEnd(event)" draggable="true">Text 1</div>

<div id="secondDragElement" class="element" ondragstart="return dragStart(event)

" ondragend="return dragEnd(event)" draggable="true">Text 2</div>

<div id="thirdDragElement" class="element" ondragstart="return dragStart(event)"

ondragend="return dragEnd(event)" draggable="true">Text 3</div>

</div>

<div id="target" class="conteiner" ondragenter="return dragEnter(event)"

ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>

Вставка элементов мультимедиа

Для того, чтобы не загружать главную Web-страницу избыточным кодом, для каждого альбома создадим отдельную HTML-страницу, которую затем будем подгружать.

Таким образом, для выполнения задания, необходимо сделать следующее:

- создать страницы альбомов и главную страницу;

- стилизовать страницы;

- создать JavaScript функции для: добавления трека в очередь воспроизведения, предварительного прослушивания трека, перехода между альбомами и воспроизведения трека из очереди.

Для того, чтобы пользователю не пришлось каждый раз заново создавать свой список воспроизведения, будем использовать localStorage.

Рассмотрим по шагам выполнение задания.

Шаг 1.

<body>

<div id=”tracks”>

<form id=”albumtracks”>

<fieldset>

<legend id=”albumname”>The Genius Hits The Road</legend>

<img id=”poster” src=”audio\Ray Charles\The Genius Hits The Road\AlbumArtSmall.jpg”/>

<table>

<tr>

<td>01-Alabamy Bound</td>

<td><a class=”addtoPLlink” onclick=”addtoPL(‘Ray Charles-Alabamy Bound’,’

audio/Ray Charles/The Genius Hits The Road/01-Alabamy Bound.mp3’);

“>Add to playlist</a></td>

<td><a class=”listenlink” onclick=”testListen

(‘audio/Ray Charles/The Genius Hits The Road/01-Alabamy Bound.mp3’);

“>Listen</a></td>

</tr>

<tr>

<td>02-Georgia On My Mind</td>

<td><a class=”addtoPLlink” onclick=”addtoPL(‘Ray Charles-Georgia On My Mind’,

‘audio/Ray Charles/The Genius Hits The Road/02-Georgia On My Mind.mp3’);

“>Add to playlist</a></td>

<td><a class=”listenlink” onclick=”testListen

(‘audio/Ray Charles/The Genius Hits The Road/02-Georgia On My Mind.mp3’);

“>Listen</a></td>

</tr>

<tr>

<td>03-Basin Street Blues</td>

<td><a class=”addtoPLlink” onclick=”addtoPL(‘Ray Charles-Basin Street Blues’,

‘audio/Ray Charles/The Genius Hits The Road/03-Basin Street Blues.mp3’);

“>Add to playlist</a></td>

<td><a class=”listenlink” onclick=”testListen

(‘audio/Ray Charles/The Genius Hits The Road/03-Basin Street Blues.mp3’);

“>Listen</a></td>

</tr>

<tr>

<td>04-Mississippi Mud</td>

<td><a class=”addtoPLlink” onclick=”addtoPL(‘Ray Charles-Mississippi Mud’,

‘audio/Ray Charles/The Genius Hits The Road/04-Mississippi Mud.mp3’);

“>Add to playlist</a></td>

<td><a class=”listenlink” onclick=”testListen

(‘audio/Ray Charles/The Genius Hits The Road/04-Mississippi Mud.mp3’);

“>Listen</a></td>

</tr>

.........................................

</body>

Обратите внимание, что сразу же заданы все атрибуты для дальнейшей стилизации, а также вызова JavaScript, а именно:

- addtoPL() – функция для добавления указанного трека в пользовательскую очередь воспроизведения;

- testListen() – функция для предварительного прослушивания трека (в течении 10 секунд, например).

Шаг 2.Создание HTML- документа для главной страницы:

<body onload=”load();”>

<div id=”header”>

<h1>Audio example</h1>

</div>

<div id=”albums”>

<form id=”albumform”>

<fieldset>

<legend class=”singer”>Ray Charles</legend>

<ul class=”albumname”>

<li><a class=”albumlink” onclick=”loadAlbum(‘RC_hitstheroad.html’);

“> The Genius Hits The Road</a></li>

<li><a class=”albumlink” onclick=”loadAlbum(‘RC_smile.html’>Have

A Smile With Me</a></li>

</ul>

</fieldset>

</form>

</div>

<div id=”tracks”>

<iframe id=”target” src=””></iframe>

</div>

Поясним имена JavaScript – функций:

- load() – загрузка списка воспроизведения;

- loadAlbum() – загрузка внешнего HTML – документа (альбома).

Шаг 3.Создание минимально необходимых стилей:

#albums

{

float:left;

}

#tracks

{

float:left;

}

#audioPanel

{

clear:left;

}

#albumform

{

width:350px;

}

audio

{

width:100%

}

a.albumlink:hover

{

cursor:pointer;

font-style:italic;

font-weight:bolder;

}

#playlistpanel

{

border:3px double black;

}

#target

{

width:800px;

height:600px;

border:0px;

}

a.listenlink

{

margin:10px;

}

a.addtoPLlink:hover, a.listenlink:hover

{

cursor:pointer;

font-style:italic;

font-weight:bolder;

}

#albumtracks

{

width:500px;

}

li.PL:hover

{

background-color:Blue;

cursor:pointer;

color:White;

}

body

{

background-color:#F7F7F7;

}

h1

{

text-align:center;

Шаг 4.СозданиеJavaScript функции

Функция добавления трека в очередь воспроизведения:

function addtoPL(name, path)

{

localStorage[name] = path; /*добавляем в localStorage путь к аудио файлу*/

window.parent.location.href=window.parent.location.href);

/*поскольку iframe подгружает внешнюю html страницу, то после добавления трека в список, необходимо явно перезагрузить основную страницу*/

Функция загрузки внешнего содержимого:

function loadAlbum(path)

{

var iframe = document.getElementById(‘target’);

iframe.setAttribute(‘src’, path);

sessionStorage[“album”] = path; /*чтобы при перезагрузке родителя,

текущая веб – страница альбома не исчезала, используем sessionStorage, для сохранения состояния*/

Функция предварительного прослушивания:

function testListen(path)

{

var audio = document.createElement(‘audio’); /*создаем новый audio element*/

var div = document.getElementById(‘tracks’);

/*получаем доступ к контейнеру с треками*/

audio.src= path; /*задаем источник для воспроизведения*/

audio.controls = false;

/*отключаем элементы управления аудио, фактически элемент не будет отображаться*/

div.appendChild(audio); /*добавляем созданный audio элемент контейнеру*/

audio.addEventListener('timeupdate', function()

/*обработчик событий, вызываемый в течении всего воспроизведения аудио, каждые 250 мс*/

{

if (audio.currentTime > 10) {audio.pause();}

/*прерываем воспроизведение после 10 секунд прослушивания*/

}, false);

audio.play(); /*начало воспроизведения аудио*/

Функция воспроизведения трека из пользовательского списка:

function playtrack(track)

{

var b = false;

for(var I in localStorage)

{

/*в данном цикле мы находм текущий трек и «запоминаем» следующий*/

if (b) {localStorage[‘next’] = localStorage[i]; break; }

if (I == track) { b=true; }

}

var audio = document.getElementById(‘audio’); /*получаем доступ к элементу audio*/

audio.src = localStorage[track]; /*задаем источник воспроизведения*/

audio.controls = true;

audio.play(); /*начинаем воспроизведение*/

Функция загрузки списка воспроизведения:

function load()

{

if (sessionStorage[“album”] != undefined)

/*если документ открывается впервые, либо после долгого перерыва, то sessionStorage

не будет содержать информацию о последнем открытом альбоме*/

{

loadAlbum(sessionStorage[«album»]);

/*открываем последний альбом, к которому обратился пользователь, таким образом

после принудительного обновления главной страницы в функции adtoPL

пользователю не придется делать это самостоятельно*/

}

var audio = document.getElementById(‘audio’);

/*получаем доступ к audio элементу*/

audio.addEventListener('ended', function()

/*добавляем обработчик события – окончания текущего воспроизвдения*/

{

playtrack('next');

/*инициируем воспроизведение следующего трека из пользовательского списка*/

}, false);

/*переходим к загрузке пользовательского списка воспроизведения*/

var list = document.getElementById(‘playlist’);

/*получаем доступ к списку воспроизведения*/

for(var i in localStorage) /*добавляем треки, сохраненные пользователем*/

{

var element = document.createElement(‘li’);

element.setAttribute(‘class’,’PL’);

element.setAttribute(‘onclick’,”playtrack(‘”+i+”’)”);

element.innerText = I;

if ( I != ‘next’)

{

list.appendChild(element);

}

}

Аппаратура и материалы. Для выполнения лабораторной работы необходим персональный компьютер со следующими характеристиками: процессор Intel с тактовой частотой 2000 МГц и выше; оперативная память – не менее 1024 Мбайт; свободное дисковое пространство – не менее 1,2 Гбайт; устройство для чтения компакт-дисков; монитор типа Super VGA (число цветов – 256) с диагональю не менее 17 ². Программное обеспечение – операционная система WINDOWS XP и выше, программы для просмотра Web-страниц.

Указания по технике безопасности. Техника безопасности при выполнении лабораторной работы сопадает с общепринятой для работы с персональным компютером. Самостоятельно не производить ремонт персонального компьютера, установку и удаление программного обеспечения. В случае неисправности персонального компьютера сообщить об этом обслуживающему персоналу лаборатории (оператору, администратору). Соблюдать правила техники безопасности при работе с электрооборудованием. Не касаться электрических розеток металлическими предметами. Рабочее место пользователя персонального компьютера должно содержаться в чистоте. Не разрешается возле персонального компьютера принимать пищу, напитки.

Не нашли, что искали? Воспользуйтесь поиском по сайту: