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

   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) - это сложный механизм организации взаимодействий между человеком и машиной, и прикладные интерфейсы, реализующие поддержку буксировки, всегда отличались высокой сложностью:

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

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

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

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

Корпорация Microsoft реализовала прикладной интерфейс механизма буксировки в ранних версиях IE. Он был не очень хорошо продуман и плохо документирован, тем не менее другие производители броузеров попытались скопировать его, а спецификация HTML5 стандартизовала некоторый API, напоминающий прикладной интерфейс в IE, и добавила новые особенности, делающие этот API более простым в использовании. На момент написания этих строк данный новый, более простой в использовании API буксировки еще не был реализован, поэтому в этом разделе будет рассматриваться прикладной интерфейс в IE, как взятый за основу стандартом HTML5.

Прикладной интерфейс механизма буксировки в IE довольно сложен в использовании, а различия между реализациями в текущих броузерах не позволяют использовать наиболее сложные части API переносимым способом. Тем не менее он дает возможность веб-приложениям участвовать в операциях буксировки подобно обычным приложениям. Броузеры всегда позволяли выполнять простейшие операции буксировки. Если выделить текст в веб-броузере, его легко можно отбуксировать в текстовый процессор. А если выделить URL-адрес в текстовом процессоре, его можно отбуксировать в броузер, чтобы открыть страницу с этим адресом. В этом разделе будет показано, как создавать собственные источники, которые позволят перемещать данные, не являющиеся текстом, и собственные приемники, откликающиеся на попытки оставить в них данные некоторым способом, помимо простого их отображения.

Механизм буксировки всегда опирался на события, поэтому в JavaScript API реализовано два множества событий: события из первого множества возбуждаются в источнике данных, а из второго - в приемнике. Все обработчики событий буксировки получают объект события, подобный объекту события мыши, с дополнительным свойством dataTransfer. Это свойство ссылается на объект DataTransfer, определяющий методы и свойства прикладного интерфейса механизма буксировки.

События, возбуждаемые в источнике, относительно просты, поэтому начнем с них. Источником для механизма буксировки является любой элемент документа, имеющий HTML-атрибут draggable. Когда пользователь начинает перемещать указатель мыши с нажатой кнопкой над элементом-источником, броузер не выделяет содержимое элемента, а возбуждает в нем событие «dragstart». Обработчик этого события должен вызвать метод dataTransfer.setData, чтобы определить данные (и тип этих данных), доступные в источнике. (Когда будет реализован новый HTML5 API, вместо этого метода нужно будет вызывать метод dataTransfer.items.add.) Обработчику также может потребоваться установить свойство dataTransfer.effectAllowed, чтобы определить тип операции - «перемещение», «копирование» или «создание ссылки» - поддерживаемой источником, и, возможно, необходимо будет вызвать метод dataTransfer.setDragImage или dataTransfer.addElement (в броузерах, поддерживающих эти методы), чтобы определить изображение или элемент документа, который будет использоваться для визуального представления перемещаемых данных.

В процессе буксировки броузер возбуждает в источнике данных события «drag». Обработчик этого события можно использовать для изменения перемещаемого ярлыка или перемещаемых данных, но в общем случае нет никакой необходимости регистрировать обработчики событий «drag».

Когда выполняется сброс, возбуждается событие «dragend». Если источник поддерживает операцию «перемещения», он должен проверить свойство dataTransfer.dropEffect, чтобы убедиться, действительно ли была выполнена операция перемещения. Если это так, данные, перемещенные в другое место, следует удалить из источника.

Событие «dragstart» является единственным, обработку которого необходимо реализовать в простейшем источнике данных. Реализация такого источника представлена в примере 17.4. Он отображает текущее время в формате «hh:mm» в элементе <span> и обновляет время раз в минуту. Если бы это было все, что реализует пример, пользователь мог бы просто выделить отображаемый текст и от; буксировать его. Но этот пример превращает часы в источник данных для механизма буксировки, устанавливая свойство draggable элемента часов в значение true и определяя функцию-обработчик ondragstart. Обработчик вызывает метод dataTransfer.setData, чтобы определить перемещаемые данные - строку с полной информацией о текущем времени (включая дату, секунды и информацию о часовом поясе). Он также вызывает dataTransfer.setDragIcon, чтобы определить изображение (ярлык с изображением часов), которое будет перемещаться в процессе буксировки.