Изучаем HTML 5-Б. Лоусон, Р. Шарп - 2011

Начинаем перетаскивать

Мы начнем с абсолютного минимума, необходимого для погружения в волшебный мир перетаскивания. По умолчанию перетаскивать можно все ссылки, текстовые узлы (выделенный текст) и элементы изображения. Это означает, что для того, чтобы пользователь мог перемещать такое содержимое по странице, вам не нужно сообщать браузеру никакие дополнительные сведения.

В нашей простой демонстрационной программе будет зона приема и пара изображений, которые вы сможете перетаскивать в эту зону. Поместив изображение в зону приема и отпустив клавишу мыши, вы увидите источник (адрес) изображения (рис. 8.1).

Рис. 8.1. По умолчанию перетаскивать можно все ссылки и изображения. Но добавив еще немного кода, вы позволите пользователям не только перетаскивать элементы по экрану, но и помещать их в специально предназначенную для этого область

С самими изображениями, которые мы будем перетаскивать, ничего делать не нужно, поэтому займемся зоной приема. Для нее нам потребуются следующие обработчики событий:

1) drag over:сообщает браузеру, что именно этот элемент принимает перетащенные данные;

2) on drop:когда на этот элемент попадают какие-то данные, с ними нужно что-то делать.

Речь сейчас пойдет об абсолютном минимуме, который требуется для реализации перетаскивания, причем этот метод работает только в Safari. Далее я расскажу вам о нескольких трюках, которые позволят реализовать его в Firefox, Chrome и IE.