Библиотека knigago >> Компьютеры: Языки и системы программирования >> Java, Java Script >> Введение в JavaScript для Мага


СЛУЧАЙНЫЙ КОММЕНТАРИЙ

# 2083, книга: Герой из тени. Том 1 и Том 2 (СИ)
автор: Агата Фишер

"Герой из тени" - это увлекательная и захватывающая дилогия в жанре фэнтези, которая следует за путешествием юного вора, стремящегося очистить свое имя и стать героем. Артан, опытный вор, несправедливо обвиняется в убийстве своего наставника. Чтобы доказать свою невиновность, он отправляется в опасное путешествие, чтобы найти истинного убийцу. По пути он встречает загадочную женщину по имени Моргана, которая утверждает, что знает секрет его прошлого. Этот том устанавливает...

СЛУЧАЙНАЯ КНИГА

Уго Чавес. Константин Николаевич Сапожников
- Уго Чавес

Жанр: Биографии и Мемуары

Год издания: 2013

Серия: Жизнь замечательных людей

Стефан Кох - Введение в JavaScript для Мага

Введение в JavaScript для Мага
Книга - Введение в JavaScript для Мага. Стефан Кох - прочитать полностью в библиотеке КнигаГо
Название:
Введение в JavaScript для Мага
 Стефан Кох

Жанр:

 Самиздат, сетевая литература, Литература ХX века (эпоха Социальных революций), Учебники и самоучители по компьютеру, Программирование: прочее, Java, Java Script

Изадано в серии:

неизвестно

Издательство:

неизвестно

Год издания:

ISBN:

http://rummelplatz.uni-mannheim.de/~skoch/

Отзывы:

Комментировать

Рейтинг:

Поделись книгой с друзьями!

Помощь сайту: донат на оплату сервера

Краткое содержание книги "Введение в JavaScript для Мага"

Аннотация к этой книге отсутствует.

Читаем онлайн "Введение в JavaScript для Мага". [Страница - 29]

стр.
dragObj[currentObj].left= e.pageX — dx;

dragObj[currentObj].top= e.pageY — dy;

}

}

function endDrag(e) {

currentObj= null;

window.releaseEvents(Event.MOUSEMOVE);

}

function init() {

// задать 'перемещаемые' слои

dragObj[0]= document.layers["layer0"];

dragObj[1]= document.layers["layer1"];

dragObj[2]= document.layers["layer2"];

}

function whichObj(e) {

// определить, по какому объекту был произведен щелчок

var hit= null;

for (var i= 0; i < dragObj.length; i++) {

if ((dragObj[i].left < e.pageX) &&

(dragObj[i].left + dragObj[i].clip.width > e.pageX) &&

(dragObj[i].top < e.pageY) &&

(dragObj[i].top + dragObj[i].clip.height > e.pageY)) {

hit= i;

dx= e.pageX- dragObj[i].left;

dy= e.pageY- dragObj[i].top;

break;

}

}

return hit;

}

// — >

</script>

</head>

<body onLoad="init()">

<layer name="layer0" left=100 top=200 clip="100,100" bgcolor="#0000ff">

<font size=+1>Object 0</font>

</layer>

<layer name="layer1" left=300 top=200 clip="100,100" bgcolor="#00ff00">

<font size=+1>Object 1</font>

</layer>

<layer name="layer2" left=500 top=200 clip="100,100" bgcolor="#ff0000">

<font size=+1>Object 2</font>

</layer>

</body>

</html>


Можно видеть, что в разделе <body> нашей HTML-страницы мы определяем три слоя. После того, как была загружена вся страница, при помощи программы обработки события onLoad, указанной в тэге <body>, вызывается функция init():


function init() {

// задать 'перемещаемые' слои

dragObj[0]= document.layers["layer0"];

dragObj[1]= document.layers["layer1"];

dragObj[2]= document.layers["layer2"];

}


Массив dragObj влючает все слои, которые пользователь может перемещать. Каждый такой слой получает в множестве dragObj некий номер. Его мы рассмотрим попозже.

Можно видеть, что мы используем тот же самый код, что использовался ранее для перехвата событий, связанных с мышью:


window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

window.onmousedown= startDrag;

window.onmouseup= endDrag;

window.onmousemove= moveIt;

К функции startDrag() я добавил следующую сроку:

currentObj= whichObj(e);


Функция whichObj() определяет, по какому объекту был произведен щелчок. Возвращает она номер соответствующего слоя. Если ни один слой не был выделен, то возвращается значение null. Полученное значение хранится в переменной currentObj. Это означает, что из currentObj можно извлечь номер слоя, который в данный момент необходимо перемещать (либо это будет null, если никакого слоя перемещать не надо).

В функции whichObj() для каждого слоя мы проверяем свойства left, top, width и height. По этим значеням мы и можем проверять, по которому из объектов пользователь щелкнул клавишей.


"Оставляемые" объекты


Теперь мы имеем все, что необходимо, чтобы реализовать механизм drag & drop. С помощью нашего скрипта пользователь может перемещать объекты по web-странице. Однако мы еще ничего не говорили об размещении перемещенных объектов. Предположим, Вы хотите создать онлайновый магазин. У нас есть несколько изделий, которые можно поместить в корзину. Пользователь должен переносить эти изделия в корзинку и оставлять их там. Это означает, что мы должны регистрировать моменты, когда пользователь опускает некий объект в корзину — иными словами, что он хочет купить его.

Какую часть кода мы должны изменить, чтобы сделать такое? Мы должны проверить, в какой месте оказался объект после того, как было зафиксировано событие MouseUp — то есть мы должны сделать некоторые добавления к функции endDrag(). Например мы могли бы проверять, попадает ли в этот момент курсор мыши в границы некого прямоугольника. Если это так, то Вы вызываете функцию, регистрирующую все изделия, которые необходимо купить (например, Вы можете поместить их в некий массив). Ну и после этого Вы можете показывать это изделие уже в корзинке.


Реализации


Есть несколько путей для совершенствования нашего скрипта. Во-первых, мы могли бы изменять порядок следования слоев, как только пользователь щелкает клавишей мыши по какому-либо объекту. Иначе выглядело бы странным, если бы Вы перемещали объект, а он при этом прятался от Вас за окружающие предметы. Очевидно, что эту проблему можно решить, меняя лишь порядок следования слоев в функции startDrag().

Я далек от мысли, что Вас устроит перемещение красных, зеленых и синих кубиков по Вашей web странице. Добавьте немного красивой графики, и читатели уже запомнят Вашу страницу. Вы можете поместить что-либо в объект слоя. Например, положите туда один тэг <img>, если хотите, чтобы ваш объект предстал в виде графического изображения.


--">
стр.

Оставить комментарий:


Ваш e-mail является приватным и не будет опубликован в комментарии.

Книги схожие с «Введение в JavaScript для Мага» по жанру, серии, автору или названию:

Орешки для Белоснежки. Ольга Дашкова
- Орешки для Белоснежки

Жанр: Эротика

Год издания: 2021

Идеальный мир для Социопата 9 (СИ). Олег Сапфир
- Идеальный мир для Социопата 9 (СИ)

Жанр: Самиздат, сетевая литература

Серия: Социопат

Сашка (СИ). (Олла)
- Сашка (СИ)

Жанр: Любовная фантастика