JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

на обложку

Флэнаган Дэвид

Шрифт:

deltaX /= ЗО;

deltaY /= 30;

}

// Если мы когда-нибудь будем получать событие mousewheel или wheel в (будущих

// версиях) Firefox, можно отказаться от обработки события DOMMouseScroll.

if (isFirefox && e.type !== '‘DOMMouseScroll")

frame.removeEventListener("DOMMouseScroll", wheelHandler, false);

//

Получить текущие размеры элемента содержимого

var contentbox = content.getBoundingClientRectO;

var contentwidth = contentbox.right - contentbox.left;

var contentheight = contentbox.bottom - contentbox.top;

// Если удерживается нажатой клавиша Alt, изменить размеры фрейма

if (e.altKey) {

if (deltaX) {

framewidth -= deltaX; // Новая ширина фрейма, но не больше,

framewidth = Math.min(framwidth, contentwidth); // чем ширина

framewidth = Math.max(framewidth,50); // содержимого

frame.style.width = framewidth + "px"; // и не меньше 50

}

if (deltaY) {

frameheight -= deltaY; // To же для высоты фрейма

frameheight = Math.min(frameheight, contentheight);

frameheight = Math.max(frameheight-deltaY, 50);

frame.style.height = frameheight + "px";

}

else { // Клавиша Alt не нажата, прокрутить содержимое в фрейме

if (deltaX) {

// Прокручивать не больше, чем

var minoffset = Math.min(framewidth-contentwidth, 0);

// Сумма deltaX и contentX, но не меньше, чем minoffset

contentX = Math.max(contentX + deltaX, minoffset);

contentX = Math.min(contentX, 0); // или больше 0

content.style.left = contentX + "px"; // Новое смещение

}

if (deltaY) {

var minoffset = Math.min(frameheight - contentheight, 0);

//

Сумма deltaY и contentY, но не меньше, чем minoffset

contentY = Math.max(contentY + deltaY, minoffset);

contentY = Math.min(contentY, 0); // или больше О

content.style.top = contentY + "px"; // Новое смещение.

}

// He позволять всплывать этому событию. Предотвратить выполнение действий

// по умолчанию. Это позволит предотвратить прокрутку содержимого документа

// в окне броузера. Будем надеяться, что вызов preventDefault для события wheel

// также предотвратит возбуждение дублирующего события mousewheel.

if (е.preventDefault) е.preventDefault;

if (е.stopPropagation) е.stopPropagation;

e.cancelBubble = true; // модель событий IE

e.returnValue = false; // модель событий IE

return false;

}

17.7. События механизма буксировки (drag-and-drop)

В примере 17.2 было показано, как реализовать операцию буксировки элементов мышью. Она позволяет перетаскивать и оставлять элементы в пределах веб-страницы, но истинная буксировка - это нечто иное. Буксировка (drag-and-drop, или DnD)- это интерфейс взаимодействия с пользователем, позволяющий перемещать данные между «источником» и «приемником», которые могут находиться в одном или в разных приложениях. Буксировка (DnD) - это сложный механизм организации взаимодействий между человеком и машиной, и прикладные интерфейсы, реализующие поддержку буксировки, всегда отличались высокой сложностью:

• Они должны взаимодействовать с операционной системой, чтобы обеспечить возможность взаимодействий между различными приложениями.

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

• Они должны предоставлять источнику способ определять ярлык или изображение, которое будет отображаться в процессе буксировки.