Изменение эскиза, который отображается рядом с указателем мыши в процессе перетаскивания, может казаться бесполезным занятием, но иногда это помогает избежать лишней головной боли. Метод 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. Оно срабатывает на источнике, когда операция перетаскивания завершается — успешно или нет. В нашем примере изображение скрывается в обоих случаях. Для того чтобы скрывать изображение только в случае успешного перетаскивания, вам придется запрограммировать соответствующую обработку.
Добавить комментарий