HTML5 за 10 минут

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


Для создания функции over () в этом задании выполните следующие действия.

1.   Откройте HTML-документ из файла draganddrop.html в избранном вами редактбре текста, например в Windows WordPad.

2.   Введите приведенный ниже код функции over() в элементе <script>. В этой функции получаются идентификаторы перетаскиваемого элемента (переменная iddraggable) и целевого элемента (переменная id).

function over(e)

{

var iddraggable = e.dataTransfer.getData("Data"); var id = e.target.getAttribute(id);

}

3.   Введите выделенный ниже полужирным код в теле функции over(), чтобы указать на то, что любой перетаскиваемый элемент может быть опущен на первый целевой элемент, что третий перетаскиваемый элемент <div> может быть опущен только на второй целевой элемент и что первый и второй перетаскиваемые элементы <div> могут быть опущены только на третий целевой элемент.

function over(e)

{

var iddraggable = e.dataTransfer.getData("Data"); var id = e.target.getAttribute(id);

if (id ==targetr) return false;

if((id == target2)

&& iddraggable == draggable3) return false;

else if (id ==,target3

&& (iddraggable == draggablel || iddraggable ==,draggable2)) return false;

else return true;

4.   Сохраните внесенные изменения в файле draganddrop.html. Непременно сделайте это в текстовом формате. По умолчанию в текстовом редакторе WordPad выбирается расширенный текстовый формат RTF, непригодный для браузеров.

Итак, вы указали браузеру на те перетаскиваемые элементы <div>, которые могут быть опущены на конкретные целевые элементы <div>.

Обработка событий опускания одних элементов на другие

Когда пользователь опускает перетаскиваемый элемент <div> на разрешенный для перетаскивания целевой элемент <div>, невольно возникает вопрос: как переместить перетаскиваемый элемент на целевой? Ответить на этот вопрос нетрудно: достаточно воспользоваться встроенной в JavaScript функцией appendChild, чтобы присоединить перетаскиваемый элемент <div> к текущему целевому элементу <div>.

Когда пользователь опускает перетаскиваемый элемент <div> на целевой элемент <div>, в последнем наступает событие ondrop, которое ранее было связано с функцией JavaScript под названием drop(), чтобы реализовать операцию опускания. Для того чтобы ввести функцию drop() в HTML-документ draganddrop.html, выполните следующие действия.

1.   Откройте HTML-документ из файла draganddrop.html в избранном вами редакторе текста, например в Windows WordPad.

2.   Введите приведенный ниже код функции drop() в элементе <script>. В теле этой функции извлекается идентификатор перетаскиваемого элемента (переменная iddraggable). function drop(e)

{

var iddraggable = e.dataTransfer.getData("Data");

3.   Введите выделенный ниже полужирным код в теле функции drop(), чтобы присоединить перетаскиваемый элемент <div> к целевому элементу <div>, а также остановить дальнейшее распространение текущего события по цепочке событий в браузере с помощью функции stopPropagation(). Эта функция возвращает логическое значение false, тем самым прекращая дальнейшее распространение текущего события.

function drop(e)

{

var iddraggable = e.dataTransfer.getData("Data"); e.target.appendChild

(document.getElementById(iddraggable)); e.stopPropagation(); return false;

}

4.   Сохраните внесенные изменения в файле draganddrop.html. Непременно сделайте это в текстовом формате. По умолчанию в текстовом редакторе WordPad выбирается расширенный текстовый формат RTF, непригодный для браузеров.

Итак, вы реализовали в этом задании обработку событий опускания.

Комментарии закрыты