HTML5 за 10 минут

Объект dataTransf er


Необходимо также упомянуть еще об одном элементе, о котором следует знать, поскольку он обеспечивает поддержку операций перетаскивания в HTML5. Это объект dataTransfег, встраиваемый в событийные объекты. Доступ к этому объекту осуществляется через событийный объект, передаваемый в начале операций перетаскивания.

В частности, у объекта dataTransfer имеется свойство effectAllowed, позволяющее указывать разрешенную операцию перетаскивания. У него имеются также функции setData() и getData() для указания тех данных, которые требуется перенести вместе с перетаскиваемым элементом, а также функция setDragImage() для указания конкретного изображения перетаскиваемого элемента.

В приведенном ниже фрагменте кода показан пример применения объекта dataTransfer в сценарии JavaScript. В этом фрагменте кода сначала указывается на то, что операции перемещения разрешаются, затем сохраняется идентификатор перетаскиваемого элемента, чтобы знать, какой именно элемент следует переместить по завершении операции перетаскивания, и, наконец, задается изображение в виде копии перетаскиваемого элемента, на котором пользователь щелкнул кнопкой мыши (в приведенном ниже фрагменте кода оно определяется атрибутом target объекта е).

е.dataTransfer.effectAllowed=move; e.dataTransfer.setData("Data", e.target.getAttribute(id)); e.dataTransfer.setDragImage(e.target, 0, 0);

Пример реализации перетаскивания

Для того чтобы показать, каким образом перетаскивание реализуется на практике, создадим в качестве примера HTML-документ под названием draganddrop.html. Результат загрузки этого документа в браузер Firefox см. на 3.1-3.2, а весь его код — в конце главы.

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

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

2.   Введите приведенный ниже код для создания трех целевых элементов, на которые должны опускаться перетаскиваемые элементы. Обратите внимание на применение в этом коде элементов <div> для обозначения целевых элементов, а также на связывание событий перетаскивания, поддерживаемых в этих элементах, с функциями JavaScript, которые будут написаны в дальнейшем.

<DOCTYPE HTML>

<html>

<head>

<title>

Пример реализации перетаскивания </title>

</head>

<body>

<Ь1>Пример реализации перетаскивания</Ь1>

<div id="targetl" ondragenter="return enter(event)" ondragover="return over(event)" ondrop-return drop(event)">

</div>

<div id="target2" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">

</div>

<div id="target3" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">

</div>

</body>

</html>

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