HTML5 за 10 минут

Внесенные изменения


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

Теперь пользователю разрешено перемещать перетаскиваемый элемент <div> в рассматриваемом здесь примере HTML-документа.

Разрешение перетаскиваемым элементам входить в целевые элементы

Когда пользователь перемещает перетаскиваемый элемент <div> на целевой элемент <div>, в последнем наступает событие ondragenter. Ранее это событие было связано с функцией JavaScript под названием enter (). В этой функции нужно указать на то, что

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

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

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

2.   Введите приведенный ниже код функции enter () в элементе <script>. Эта функция возвращает логическое значение true, указывающее на то, что перетаскиваемому элементу разрешено входить в целевой элемент.

function enter(е)

{

return true;

}

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

Теперь пользователь сможет перемещать перетаскиваемые элементы <div> на целевые элементы <div>.

Разрешение опускать перетаскиваемые элементы на определенные целевые элементы

Когда пользователь перемещает перетаскиваемый элемент <div>, располагая его над целевым элементом <div>, в последнем наступает событие ondragover, которое ранее было связано с функцией JavaScript под названием over(). С помощью функции over () можно указать на то, что перетаскиваемый элемент разрешается опустить на текущий целевой элемент. Так, если эта функция возвращает логическое значение true, перетаскиваемый элемент нельзя опускать на текущий целевой элемент. А если она возвращает логическое значение false, то перетаскиваемый элемент разрешается опускать на текущий целевой элемент.

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