Событие ondrag
Пример ondrag
Вызовите функцию при перетаскивании элемента <p>:
<p draggable="true" ondrag="myFunction(event)">Тащи меня!</p>
Попробуйте сами »
Ещё примеры ниже.
Описание ondrag
Событие ondrag происходит, когда выделение перетаскивается.
Перетаскивание — это распространенная функция в HTML. Это когда вы "захватываете" объект и перетаскиваете его в другое место.
Чтобы сделать элемент перетаскиваемым, используйте Атрибут draggable.
Дополнительную информацию см. в Учебнике по перетаскиванию HTML.
Ссылки и изображения перетаскиваются по умолчанию и не требуют атрибута draggable.
На разных этапах операции перетаскивания происходит множество событий (см. ниже):
События перетаскивания ondrag
На перетаскиваемом элементе:
| Событие | Происходит, когда |
|---|---|
| ondrag | Элемент перетаскивается |
| ondragstart | Пользователь начинает перетаскивать элемент |
| ondragend | Пользователь закончил перетаскивание элемента |
Примечание: При перетаскивании элемента событие ondrag срабатывает каждые 350 миллисекунд.
На целевом объекте:
| Событие | Происходит, когда |
|---|---|
| ondragenter | Перетаскиваемый элемент попадает в цель перетаскивания |
| ondragleave | Перетаскиваемый элемент в цель перетаскивания |
| ondragover | Перетаскиваемый элемент находится над целью перетаскивания |
| ondrop | Перетаскиваемый элемент сбрасывается на цель |
Связные страницы ondrag
Объект Event перетаскивания
Атрибут draggable
Учебник ondrag
Синтаксис ondrag
В JavaScript, используется метод addEventListener():
object.addEventListener("drag", myScript);
Попробуйте сами »
Технические детали ondrag
| Bubbles: | Да |
|---|---|
| Cancelable: | Да |
| Тип событий: | DragEvent |
| HTML теги: | Все HTML элементы |
| DOM Версия: | События 3 уровня |
Ещё примеры ondrag
Демонстрация ВСЕХ возможных событий перетаскивания:
<p draggable="true" id="dragtarget">Тащи меня!</p>
<div class="droptarget">Оставьте здесь!</div>
<script>
// События, запущенные на цели перетаскивания
document.addEventListener("dragstart", function(event) {
// Метод dataTransfer.setData() устанавливает тип данных и значение перетаскиваемых данных.
event.dataTransfer.setData("Text", event.target.id);
// Вывод текста при начале перетаскивания элемента p
document.getElementById("demo").innerHTML = "Начал перетаскивать элемент p.";
// Изменить непрозрачность перетаскиваемого элемента
event.target.style.opacity = "0.4";
});
// Перетаскивая элемент p, измените цвет выводимого текста.
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Вывести текст после завершения перетаскивания элемента p и сбросить непрозрачность
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Перетаскивание элемента p завершено.";
event.target.style.opacity = "1";
});
// События, запущенные при сбросе цели
// Когда перетаскиваемый элемент p попадает в droptarget, измените стиль границы DIVS
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// По умолчанию данные/элементы не могут быть удалены в других элементах. Чтобы разрешить удаление, мы должны предотвратить обработку элемента по умолчанию
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Когда перетаскиваемый элемент p покидает droptarget, сбрасывается стиль границы DIVS
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* При перетаскивании — запретить браузеру обрабатывать данные по умолчанию (по умолчанию открывается как ссылка при перетаскивании)
Сбросить цвет выходного текста и цвет границы DIV
Получить перетаскиваемые данные с помощью метода dataTransfer.getData()
Перетаскиваемые данные — это идентификатор перетаскиваемого элемента ("drag1")
Добавить перетаскиваемый элемент в элемент перетаскивания
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
Попробуйте сами »
Поддержка ondrag
ondrag является особенностью DOM уровня 3 (2004).
Он полностью поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 11 |