Как делается drag and drop на странице?

Question

[Андрей]

С помощью каких технологий/фреймворков реализуется возможность интерактивного drag and drop на веб-страницах?

К примеру, Google Calendar, когда событие можно просто перетащить на другой день, и оно тут же обновится.

Или какой-нибудь to-do список, где дело можно перетащить на иконку с корзиной и оно удалится.

В html5 вроде есть тег (или атрибут) draggable. Понятное дело, что интерактивности он не принесёт, но имеет ли он какую либо пользу в данном случае?

Answer 1

[Анатолий Медведев]

https://learn.javascript.ru/drag-and-drop
https://learn.javascript.ru/drag-and-drop-objects

Answer 2

[Александр Таратин]

https://www.html5rocks.com/en/tutorials/dnd/basics/
rubaxa.github.io/Sortable

Answer 3

[alexalexes]

Может быть реализовано на нативном JavaScript путем навешивания обработчиков событий onmousedown, onmousemove, onmouseup на манипулируемый элемент (событие onmousedown), а также на заполняющий всю площадь страницы контейнер (события onmousemove, onmouseup). Естественно, механику взаимодействия элементов и отслеживания фазы drag and drop вам придется реализовать самостоятельно.
PS: При реализации drag and drop не забудьте про пользователей с сенсорным экраном. У них другая группа событий: ontouchstart, ontouchmove, ontouchend, и число точек касаний у них может быть больше чем одна.