Язык JavaScript не поддерживает напрямую механизм drag & drop. Это значит, что у нас нет возможности назначить объекту image свойство
Итак, то же нам нужно? Нам нужны две вещи. Во-вервых, мы должны регистрировать определенные события, связанные с работой мышью, то есть нужно понять, каким образом, мы сможем узнать, какой объект необходимо переместить и на какую позицию? Затем нам нужно подумать, каким именно образом мы сможем показывать перемещение объектов по экрану. Конечно же, мы будем пользоваться такой новой возможностью языка, как слои, при создании объектов и перемещении их по экрану. Каждый объект представлен собственным слоем.
События при работе с мышью в JavaScript 1.2
Какие события, происходящие при работе с мышью, нам следует использовать? У нас нет такого события, как
Пользователь нажал клавишу мыши в каком-либо месте на окне браузера. Наш скрипт должен зафиксировать это событие и вычислить, с каким объектом (то есть слоем) это было связано. Нам необходимо знать координаты точки, где произошло это событие. В JavaScript 1.2 реализован новый объект Event, который сохраняет координаты этой точки (а также еще и другую информацию о событии).
Другой важной момент заключается в перехвате событий. Если пользователь, например, щелкает по клавише мыши, то сигнал о соответствующем событии посылается непосредственно объекту button. Однако в нашем примере необходимо, чтобы событие обрабатывалось объектом window (окно). Поэтому мы позволяем объекту окна
Код этого примера:
<html>
<script language='JavaScript'>
<!-
window.captureEvents(Event.CLICK);
window.onclick= displayCoords;
function displayCoords(e) {
alert('x: ' + e.pageX + ' y: ' + e.pageY);
}
// — >
</script>
'Кликните' клавишей мыши где-нибудь в этом окне.
</html>
Сперва мы сообщаем, что объект window перехватывает сигнал о событии
window.onclick= displayCoords;
говорит о том, что должно происходить, когда случается событие
function displayCoords(e) {
alert('x: ' + e.pageX + ' y: ' + e.pageY);
}
Как видите, эта функция имеет аргумент (мы назвали его
MouseDown, MouseMove и MouseUp
Как я уже говорил, в языке JavaScript нет события MouseDrag. Поэтому мы должны пользоваться событиями
Можно видеть, что код скрипта почти такой же, как и в предыдущем примере:
<html>
<script language='JavaScript'>
<!-
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove= displayCoords;
function displayCoords(e) {
status= 'x: ' + e.pageX + ' y: ' + e.pageY;
}
// — >
</script>
Координаты мыши отображаются в строке состояния.
</html>
Заметьте, что Вам необходимо написать именно
Теперь мы можем объединить оба последних примера. Мы хотим, чтобы были представлены координаты указателя мыши, когда пользователь
Код этого примера выглядит следующим образом:
<html>
<script language='JavaScript'>
<!-window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
window.onmousedown= startDrag;
window.onmouseup= endDrag;
window.onmousemove= moveIt;
function startDrag(e) {
window.captureEvents(Event.MOUSEMOVE);
}
function moveIt(e) {
// показывать координаты
status= 'x: ' + e.pageX + ' y: ' + e.pageY;
}
