Под знаменем HTML 5

Источник материала:

Осталось обсудить совсем мало новшеств в браузерах нового поколения, связанных с работой JavaScript. Сегодня рассмотрим небольшую, но очень приятную возможность перетаскивания элементов на веб-странице посредством действия "тяни-бросай" (drag'n'drop).

Метод drag'n'drop появился с началом эры графических пользовательских интерфейсов и стал замечательным открытием в работе с персональным компьютером. Суть этого ставшего привычным метода в том, чтобы перемещать посредством манипулятора мышь объекты на экране монитора, заставляя таким образом их менять позицию или взаимодействовать друг с другом.

Drag'n'drop позволил упростить многие операции при взаимодействии с вычислительной машиной, которые в ином случае требовали от пользователя гораздо больше телодвижений. Перетаскивание мышкой может заменить целую последовательность кликов. Простота работы с компьютером, соответственно, увеличивает производительность труда и эффективность работы.

Метод drag'n'drop в браузерах до последнего времени не использовался, так как большой необходимости в этом не было. Но, когда массово начали использоваться веб-приложения, и html из документа превратился в интерфейс к этим веб-приложениям, появилась необходимость в реализации этого метода в браузерах.

Естественно, поначалу веб-программисты писали собственные реализации метода drag'n'drop. Потом эта реализация появилась в некоторых фреймворках. И вот теперь идёт речь о реализации drag'n'drop в качестве официального стандарта для браузеров, что, в свою очередь, должно резко уменьшить количество "велосипедов", изобретённых до этого.

В текущем черновике W3C перетаскивание элементов веб-странички реализовано следующим образом. Во-первых, появился новый атрибут для перетаскиваемых элементов draggable. Этому атрибуту в случае реализации drag'n'drop следует задавать значение "true".

В спецификации D&D появилось несколько новых событий, нужных для реализации метода перетаскивания:

• ondragstart - этот метод вызывается в начале перетаскивания элемента;
• ondragend - этот метод вызывается, когда перетаскивание завершилось;
• ondragover - этот метод вызывается при наведении курсора мышки с перемещаемым элементом на целевой элемент;
• ondragleave - этот метод вызывается, когда курсор мышки с перемещаемым элементом покидают целевой элемент;
• ondrop - этот метод вызывается при "бросании" перемещаемого элемента на целевой элемент, когда отпускается кнопка мыши.

События ondragstart, ondragend вызываются для перемещаемого элемента, а события ondragover, ondragleave, ondrop - для целевого элемента, куда происходит перемещение.

За непосредственные данные, которые перемещаются, отвечает объект dataTransfer. Типов данных, которые можно перемещать из элемента в элемент, в разных браузерах разное количество. Основных типов перемещаемых данных два - text/plain и text/uri-list. Но, например, в браузере Firefox этих типов шесть, в том числе и картинки.

Вот, собственно, и весь текущий черновой стандарт метода drag'n'drop для браузеров.

Попробуем написать небольшой пример этой технологии. В нашем примере можно перетянуть мышью текстовый элемент "тяни" внутрь синего квадратного контейнера "бросай". Для простоты напишем только обработчики методов ondragstart и ondrop. Обработчики ondragenter и ondragover будут просто возвращать false, чтобы заблокировать стандартное поведение браузера.

<script> // Обработчик перемещаемого элемента function drag(target, e) {  e.dataTransfer.setData('text/plain', target.id);} //Обработчик элемента-приёмника function drop(target, e) {  var id = e.dataTransfer.getData('text/plain');  target.appendChild(document.getElementById(id));}  </script> <!- перемещаемый элемент -> <p id="file" draggable="true"  ondragstart="drag(this, event)"> Тяни</p> <!- элемент-приёмник -> <div id="box"  style=" width:100px; height:100px;   background-color: blue"   ondrop="drop(this, event)"  ondragenter="return false" ondragover="return false"> Бросай</div>

Пример работает в последних версиях Google Crome и Mozilla Firefox.

Михаил АСТАПЧИК