Метод setDragImage()

Метод setDragImage().

Изменение эскиза, который отображается рядом с указателем мыши в процессе перетаскивания, может казаться бесполезным занятием, но иногда это помогает избежать лишней головной боли. Метод setDragImage() не только позволяет менять эскиз, но также принимает два атрибута, x и y, устанавливающих позицию эскиза относительно указателя мыши. Браузер обычно сам генерирует эскиз источника, а его позиция относительно указателя устанавливается в зависимости от того, в какой точке находился указатель мыши, когда пользователь начал перетаскивание. Метод setDragImage() позволяет задать конкретную позицию, которая не будет меняться между операциями перетаскивания.

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Перетаскивание</title>

<link rel="stylesheet" href="dragdrop. css">

<script src="dragdrop. js"></script>

</head>

<body>

<section id="dropbox">

<canvas id="canvas" width="500" height="300"></canvas> </section>

<section id="picturesbox">

<img id="image1" src="http://www.minkbooks.com/content/monster1.gif"> <img id="image2" src="http://www.minkbooks.com/content/monster2.gif"> <img id="image3" src="http://www.minkbooks.com/content/monster3.gif"> <img id="image4" src="http://www.minkbooks.com/content/monster4.gif"> </section>

</body>

</html>

Используя новый HTML-документ из листинга 8.7, мы продемонстрируем важность метода setDragImage(). Для этого настроим элемент <canvas> в качестве зоны приема.

Листинг 8.8. Маленькое приложение с функциональностью перетаскивания

Function initiate(){

Var images=document. querySelectorAll(‘#picturesbox > img’); for(var i=0; i<images. length; i++){

Images[i].addEventListener(‘dragstart’, dragged, false); images[i].addEventListener(‘dragend’, ending, false);

}

Drop=document. getElementById(‘canvas’);

Canvas=drop. getContext(’2d’);

Drop. addEventListener(‘dragenter’, function(e){ e. preventDefault(); }, false); drop. addEventListener(‘dragover’, function(e){ e. preventDefault(); }, false);

Drop. addEventListener(‘drop’, dropped, false);

}

Function ending(e){ elem=e. target;

Elem. style. visibility=’hidden’;

}

Function dragged(e){ elem=e. target;

E. dataTransfer. setData(‘Text’, elem. getAttribute(‘id’)); e. dataTransfer. setDragImage(e. target, 0, 0);

}

Function dropped(e){ e. preventDefault();

Var id=e. dataTransfer. getData(‘Text’); var elem=document. getElementById(id);

Var posx=e. pageX-drop. offsetLeft; var posy=e. pageY-drop. offsetTop;

Canvas. drawImage(elem, posx, posy);

}

Window. addEventListener(‘load’, initiate, false);

Создав этот пример, мы подобрались совсем близко к приложениям из реального мира. Код в листинге 8.8 управляет тремя аспектами процесса. Когда изображение перетаскивают, вызывается функция dragged(). Она определяет, каким будет эскиз перетаскиваемого изображения (для чего применяется метод setDragImage()). Кроме того, в коде задается контекст, для того чтобы можно было работать с холстом. Отпущенное пользователем над зоной приема изображение визуализируется посредством метода drawImage(), которому передается ссылка на источник. Наконец, в функции ending() изображение на источнике скрывается.

В качестве уникального эскиза используем само изображение, которое перетаскивает пользователь. В этом отношении мы ничего не изменили, только установили позицию эскиза (0, 0) — это означает, что мы теперь точно знаем, где эскиз находится относительно указателя мыши. Эту информацию учитываем в функции dropped(). Применяя технику, уже знакомую по предыдущим главам, мы вычисляем точку на холсте, в которой пользователь отпустил элемент-источник, и визуализируем изображение точно в этом месте. Протестируйте этот пример в браузерах,

Поддерживающих метод setDragImage() (например, Firefox 4), и вы увидите, что изображение на холсте появляется именно под эскизом. Таким образом, пользователю не составляет труда подобрать точное местоположение, в котором он отпустит изображение.

В коде из листинга 8.8, для того чтобы скрывать исходное изображение по завершении операции, используется событие dragend. Оно срабатывает на источнике, когда операция перетаскивания завершается — успешно или нет. В нашем примере изображение скрывается в обоих случаях. Для того чтобы скрывать изображение только в случае успешного перетаскивания, вам придется запрограммировать соответствующую обработку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *