Процедура перетаскивания элементов в настольных программах настолько привычна всем, что пользователи выполняют ее, не задумываясь, автоматически. Да и разработчикам она не доставляет больших хлопот: уже давно почти все заботы о ее реализации взяли на себя инструментальные средства. В веб-приложениях ситуация несколько иная. Во-первых, документ, позволяющий перемещать свои компоненты с помощью мыши, пока что скорее исключение, чем правило, а во-вторых, чтобы организовать перетаскивание средствами JavaScript, приходится прилагать значительные усилия. Однако данный вопрос не остается без внимания разработчиков, вследствие чего в новой версии HTML предусмотрена поддержка новых событий, определяющих процесс перетаскивания и взаимодействие перемещаемого элемента (dragged element) с принимающим объектом (drop listener):
dragstart – инициализация процедуры перетаскивания;
drag – собственно перемещение, т. е. движение мыши с нажатой кнопкой;
drop – свидетельство о том, что перетаскиваемый элемент был успешно получен принимающим объектом;
dragenter, dragover и drag-leave – соответственно вход перетаскиваемого объекта в область, занимаемую принимающим объектом, перемещение его по ней и выход за ее пределы.
Как реализовать процедуру перетаскивания в приложении – тема для отдельного руководства, этот вопрос невозможно рассмотреть в обзорной статье даже вкратце. Стоит лишь заметить, что введение новых событий, несомненно, упростит соответствующий код. Вместо того чтобы оперировать понятиями нажатия, отпускания кнопки мыши и перемещения курсора, можно использовать более высокоуровневые события.
Помогут в работе и интерфейсы DragEvent и DataTransfer, определенные в HTML 5. Однако и новые средства не делают задачу организации перетаскивания тривиальной, так что дальнейшие усовершенствования инструментария, бесспорно, будут приветствоваться разработчиками.
