Создание JavaScript функции

Перед тем, как писать функции - обработчики событий, кратко пробежимся по теоретическим аспектам.

Отслеживать процесс Drag and drop позволяют следующие события:

• dragstart;
• drag;
• dragenter;
• dragleave;
• dragover;
• drop;
• dragend.

События dragenter, dragover и dragleave можно использовать для того, чтобы сделать процесс переноса более наглядным. Например, можно добавить рамку тому элементу, над которым происходит перетаскивание.

Для обработки процесса бросания элемента, надо назначить обработчик событий drop и dragend. В нем надо отменить поведение браузера по умолчанию, т.к. это может быть переход на другую страницу.

Объект DataTransfer (см. список материалов по теме) хранит данные отсылаемые в процессе перетаскивания. dataTransfer задается в событииdragset и используется в событии drop. Вызовe.dataTransfer.setData(format, data) устанавливает mimetype и данные нужные для перетаскивания.

Свойство dataTransfer имеет функцию getData(format) для получения сохраненных данных.

Свойство dataTransfer предоставляет возможность тонкой настройки отображения процесса переноса:

• dataTransfer.effectAllowed. Эффект, поддерживаемый целевым элементом перетаскивания. Как правило, это значение задается обработчиком события dragstart. Может принимать следующие значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized (см. список дополнительных материалов по теме).
• dataTransfer.dropEffect. Эффект, выбранный пользователем или целевым элементом. Может принимать следующие значение: none, copy, link, move (см. список дополнительных материалов по теме).
• dataTransfer.setDragImage(i, x, y). Вместо того чтобы использовать при перетаскивании полупрозрачную картинку по умолчанию (см. список дополнительных материалов по теме).

Теперь можно перейти к созданию самих функций: