JavaScript API: тяни-бросай

Осталось обсудить совсем мало новшеств в браузерах нового поколения, связанных с работой 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.

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