HTML5 за 10 минут

HTML-документ и его возможности


В этой главе в качестве примера перетаскивания будет рассмотрен HTML-документ под названием draganddrop.html. Результат загрузки этого документа в браузер Firefox приведен на 3.1-3.2, а весь его код — в конце данной главы. Три перетаскиваемых элемента <div> обозначены метками 1, 2 и 3. Код в рассматриваемом здесь примере будет настроен таким образом, чтобы не все элементы <div> можно было перетаскивать на крупные квадратные целевые элементы, расположенные на веб-странице. Если, например, попытаться перетащить элемент <div> с меткой 1 на второй целевой элемент, появится знак запретной операции, указывающий на то, что данный целевой элемент не воспримет перетаскиваемый элемент <div> с меткой 1. С другой стороны, элемент <div> с меткой 1 можно перетащить на третий целевой элемент.

А теперь рассмотрим атрибут draggable и атрибуты с префиксом on и покажем, как пользоваться ими на практике для поддержки перетаскивания.

Представление о прикладном программном интерфейсе перетаскивания

С полным описанием прикладного программного интерфейса (API), разработанного W3C для поддержки перетаскивания в HTML5, можно ознакомиться по адресу http://dev.w3.org/html5/
spec/dnd.html.

На уровне HTML поддержка перетаскивания реализуется с помощью следующих атрибутов.

•    draggable

•    ondragenter

•    ondragover

•    ondrop

•    ondragstart

•    ondragend

Нетрудно догадаться, что в атрибуте draggable отдельного элемента устанавливается логическое значение true, если данный элемент требуется сделать перетаскиваемым. В то же время атрибуты с префиксом on служат для связывания функций JavaScript с различными событиями, возникающими при перетаскивании. В частности, атрибут ondragenter служит для вызова функции JavaScript в тот момент, когда перетаскиваемый элемент перетаскивается на другой элемент веб-страницы. В функции JavaScript имеется возможность указать браузеру, следует ли опускать перетаскиваемый элемент на расположенный под ним другой элемент веб-страницы.

Рассмотрим вкратце каждый из упомянутых выше атрибутов, а затем применим их на практике в примере HTML-документа из файла dradanddrop. html.

Атрибут draggable

Самым основным из всех атрибутов перетаскивания является атрибут draggable. Для того чтобы сделать элементы перетаскиваемыми, в этом атрибуте устанавливается логическое значение true, как показано в приведенном ниже фрагменте кода.

<div id="draggable3" draggable="true">

</div>

Тем самым браузер уведомляется о том, что данный элемент является перетаскиваемым, но одной только упомянутой выше установки атрибута draggable для этого недостаточно. Для того чтобы механизм, перетаскивания начал действовать, необходимо также связать функции JavaScript и соответствующие атрибуты с префиксом on.

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