приклад використання
Розглянемо приклад в якому елемент
можна переміщати між двома блоками
.
Коли ми починаємо переміщати елемент
спрацьовує дві події: перше спрацьовує на початку операції перетягування мишею (ondragstart), на яке ми встановили скрипт, який дозволяє зберігати дані і їх тип (метод setData), друга подія ondrag спрацьовує в момент, коли почалося перетягування і інформує нас про це в елементі
.За замовчуванням елементи не можуть бути поміщені в інші елементи. Щоб це стало доступно (скасування дії браузера за замовчуванням) ми використовуємо метод preventDefault (). який спрацьовує, коли елемент переміщують над допустимої зоною для перенесення (атрибут подій ondragover).
Подія ondragenter) відбувається, коли елемент буде перенесений на задану зону, при цьому спрацьовує скрипт, який встановлює колір заднього фону жовтий і пунктирну кордон чорного кольору. Коли елемент залишає задану зону, значення стилю кордону і заднього фону повертаються в первинний вигляд (подія ondragleave).
У прикладі використовуються ще два арібута подій: перший - ondrop, який спрацьовує, коли елемент опустився на об'єкт перетягування, при цьому запускається скрипт, який позоляет отримати дані (метод getData) і другий атрибут подій - ondragend, який спрацьовує, коли користувач закінчив перетягування елемента і запускає скрипт, який інформує нас про завершення процедури перетягування в елементі
.Перемістіть HTML елемент
між двома прямокутниками:
Відмінності HTML 4.01 від HTML 5
Атрибут подій ondragstart є новим в HTML5.