В последнее время я много работаю над веб-интерфейсами с возможностью перетаскивания объектов методом Drag and Drop. В процессе изучения стандартов и сложившихся лучших практик работы с этим подходом, мне стало интересно разобраться в истории его появления. Копнув поглубже, я выяснил, что Drag and Drop — это один из самых первых способов взаимодействия человека с компьютерной программой. В этой статье хочу рассмотреть историю появления и развития этой технологии.

---

Drag and Drop (drag-and-drop) (с англ. «потащи и брось») — это один из самых ранних способов взаимодействия с графическим интерфейсом, который сегодня можно встретить практически в любом более-менее сложном приложении. Подход Drag and Drop основан на опыте взаимодействия с реальными физическими объектами, поэтому для некоторых задач он считается наиболее удобным и интуитивно понятным решением. Когда мы перетаскиваем файлы в операционной системе из одной папки в другую, переводим рабочие задачи в системе управления проектами из статуса In Progress в Done, удаляем ненужные приложения в смартфоне или меняем размеры объектов в графическом редакторе — каждый раз мы используем Drag and Drop.

Самый первый графический интерфейс

Самый ранний пример использования подхода Drag and Drop можно увидеть в программе Sketchpad , которая была написана в 1963-ем году информатиком Айвеном Сазерлендом в качестве докторской диссертации в MIT. Sketchpad был первой в мире программой, которая обладала полноценным графическим интерфейсом, а также стала прообразом современных САПР (систем автоматизированного проектирования). В Sketchpad графические объекты создавались и модифицировались при помощи светового пера, которое сообщало программе информацию о своём положении на экране монитора. Пользователь мог «захватить» пером любой объект на экране и переместить его в другую позицию.

Первый коммерческий графический планшет

Работа Сазерленда вдохновила инженеров RAND Corporation на разработку устройства RAND Tablet , ставшего первым в мире коммерческим графическим планшетом и вышедшее на рынок в 1984-ом году. RAND Tablet позволял не только создавать и управлять геометрическими объектами, но и умел в реальном времени распознавать рукописные символы. Для ввода информации использовался чуствительный к силе нажатия стилус, способный передавать сигнал, содержащий одну из более чем 1 миллиона уникальных позиций на планшете. Среди прочих возможностей, планшет позволял перемещать объекты по рабочей поверхности, «захватив» их нажатием кнопки, расположенной на стилусе.

The Mother of All Demos

9 декабря 1968-го года в рамках презентации системы NLS один из первых исследователей человеко-машинного интерфейса Дуглас Энгельбарт продемонстрировал технологию «click-move-click» («кликни-перемести-кликни»). Так Энгельбарт смог поменять порядок слов в списке на экране, используя для этого компьютерную мышь и вспомогательную кнопку, выполняющую команду перемещения (move). Позже эту презентацию назвали The Mother of All Demos — именно здесь были впервые продемонстрированы изобретения и технологии, которые стали фундаментальными элементами современных компьютерных систем: такие как первая компьютерная мышь, гипертекст, электронная почта, и даже видеоконференции и совместное редактирование документов.

Xerox Star и первый WIMP-интерфейс

Технологию управления графическими объектами, показанную Энгельбартом, использовали инженеры компании Xerox PARC при создании персонального компьютера Xerox Star , который вышел в 1981-ом году. Xerox Star был первым коммерческим персональным компьютером, в котором был реализован так называемый WIMP-интерфейс (оконный графический интерфейс, управляемый компьютерной мышью), а известный нам уже подход «click-move-click» позволял изменять порядок расположения файлов и папок на рабочем столе.

Apple и сlick-and-drag

Далее эту же технологию перемещения файлов адаптировала компания Apple в своём компьютере Apple Lisa . За разработку графического интерфейса отвечал Билл Аткинсон , а сам компьютер был выпущен на рынок в 1983-ем году. Apple Lisa считается первым массово выпущенным в продажу персональным компьютером с графическим интерфейсом.

Аткинсон развил идеи, реализованные в Apple Lisa, в следующем персональном компьютере компании Macintosh 128K , который появился в продаже в 1984-ом году. Обновлённая технология взаимодействия с файлами на рабочем столе и внутри окон называлась «click-and-drag» («кликни-и-потяни»), и предполагала использование только мыши в качестве устройства управления.

Дальнейшее развитие Drag and Drop в современных операционных системах

В следующих версиях операционной системы для компьютеров Apple, а также в системах для персональных компьютеров компаний IBM и Microsoft (OS/2, Windows) возможности технологии были усовершенствованы. Так, например, в Mac OS 7 можно было открывать файлы в конкретных приложениях через перетаскивание их на иконку соответствующей программы. В это же время за подходом было закреплено современное название Drag and Drop. В 1992-ом году Microsoft представила Windows 3.1 , в которой появилась возможность перетаскивать мышью объекты из окна одного приложения в окно другого. Уже через три года в Windows 95 технология Drag and Drop стала неотъемлемой частью любого сложного взаимодействия с интерфейсом операционной системы.

К концу 90-ых годов корпорации, разрабатывающее программное обеспечение для персональных компьютеров, использовали подход Drag and Drop уже во всех более или менее сложных программах. Кроме типовых задач управления порядком сортировки сущностей, организации иерархий и перемещения объектов с места на место, Drag and Drop использовался и для более сложных взаимодействий. Он позволял менять размеры графических объектов, перемещать фрагменты текста между документами или прикреплять файлы к электронному письму, перетаскивая их прямиком с рабочего стола.

Первое появление Drag and Drop в веб-интерфейсах

Долгое время интернет-браузеры не были предназначены для разработки и запуска сложных приложений, способных конкурировать с настольными программами. Любой запрос на сервер требовал обновления веб-страницы для отображения свежих данных, что было серьёзным ограничением для создания полностью интерактивных сайтов. Это же ограничение не позволяло использовать Drag and Drop, так как не было возможности сохранить состояние страницы после перемещения элемента между перезагрузками. Так продолжалось до выпуска Internet Explorer 5 (IE5), в котором появилась первая версия XMLHttpRequest (XHR). С помощью XHR можно было выполнять запросы на сервер и обновлять содержимое страницы без её перезагрузки.

Впервые Drag and Drop в веб-интерфейсах был реализован в 1999-ом году американским стартапом Halfbrain в приложении BrainMatter. BrainMatter был предназначен для работы с электронными таблицами и стал настоящим технологическим прорывом, так как использовал новые возможности Internet Explorer 5. Приложение во многом повторяло функционал популярного табличного редактора Excel, а Drag and Drop в нём использовался для изменения расположения и размеров колонок, строк и ячеек в таблице — так же как и в старшем брате от Microsoft. К сожалению, BrainMatter мог работать только в IE5, и не был совместим с ещё одним очень популярным в то время браузером — Netscape Navigator.

Drag and Drop в вебе набирает популярность

Следующим крупным веб-приложением, в котором был реализован Drag and Drop стал Oddpost — веб-клиент для электронной почты, выпущенный в 2002-ом году одноимённой компанией. Oddpost повторял функциональность больших настольных веб-клиентов, а подход Drag and Drop стал основным способом управлять расположением писем и перемещать их между папками. К этому времени стандарт XMLHttpRequest появился и в Netscape Navigator, что позволило Oddpost приобрести популярность среди пользователей интернета.

В 2004-ом году Oddpost был приобретён компанией Yahoo, которая интегрировала его в собственный веб-клиент Yahoo Mail. Вплоть до 2009-го года Yahoo Mail был единственным веб-клиентом для электронной почты, в котором можно было перемещать письма, используя Drag and Drop.

В июле 2009-го года вышло обновление Google Gmail, в котором была добавлена возможность множественного выбора и перемещения писем внутрь ярлыков с помощью мыши. К этому времени технология Drag and Drop была представлена в стандарте HTML5 Drag and Drop и уже поддерживалась основными на тот момент браузерами — Firefox 3.5, Chrome 3.0, Safari 3.0 и IE5.

Drag and Drop в веб-интерфейсах как стандарт взаимодействия

К началу 2010-ых годов практически полностью оформилась концепция Ajax — основанный на XMLHttpRequest способ асинхронно выполнять запросы к серверу и обновлять содержимое без перезагрузки страницы с помощью JavaScript. Это позволило компании Fog Creek Software представить в 2011-ом году Trello — веб-приложение для совместного управления проектами в парадигме канбан. Trello был написан на MVC-фреймворке Backbone.js, а взаимодействие с сервером строилось на только что вышедшем стандарте WebSockets. Технология Drag and Drop в Trello стала основным способом взаимодействия с интерфейсом приложения, а качество её реализации стало стандартом для других разработчиков на многие годы вперёд.

С момента выхода Trello веб-интерфейсы только усложняются, а требования к дизайну и юзабилити веб-приложений всё время повышаются. Это касается и требований к проектированию взаимодействия Drag and Drop, которое должно быть удобным и эргономичным в работе не только в настольных, но и в мобильных версиях приложений, иметь поддержку сенсорного управления и обеспечивать доступность (accessibility) интерфейса для людей с ограниченными возможностями.

Вопросы удобства и эргономики Drag and Drop я рассмотрел в другой своей статье: Руководство по проектированию интерфейсов с Drag and Drop . Сегодня же мне было важно показать тот путь развития, который прошёл подход «потащи и брось» от самого первого графического интерфейса до современных веб-приложений. Технология Drag and Drop была одним из самых первых изобретений во взаимодействии человека с компьютером, и появилась на несколько десятилетий раньше привычных нам сегодня иконок, окон и контекстных меню. При этом Drag and Drop продолжает активно развиваться и использоваться в современных приложениях.

---

Приглашаю вас подписаться на мой телеграм-канал: https://t.me/alexgriss , в котором я пишу о фронтенд-разработке, публикую полезные материалы, делюсь своим профессиональным мнением и рассматриваю темы, важные для карьеры разработчика.