HTML атрибут событий `ondragleave`

Значение и применение

Атрибут событий ondragleave позволяет задать срабатывание скрипта, когда элемент выходит из допустимой зоны для переноса.

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

В HTML5 было добавлено семь атрибутов событий, которые используются на различных этапах операции перетаскивания:

События, происходящие с объектом перетаскивания:

ondragstart (срабатывает в начале операции перетаскивания элемента).
ondrag (срабатывает, когда элемент перетаскивается).
ondragend (срабатывает, когда пользователь закончил перетаскивание элемента).

События, происходящие с объектом на который перетаскивают:

ondragenter (когда элемент будет перенесен на заданную зону (цель для переноса)).
ondragover (срабатывает, когда элемент перемещают над допустимой зоной для переноса).
ondragleave (срабатывает, когда элемент выходит из допустимой зоны для переноса).
ondrop (срабатывает после того, как перетаскиваемый элемент опустился на объект перетаскивания).

Поддержка браузерами

Спецификации: multipage, multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.HTMLElement.dragleave_event
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
dragleave event	✓1	✓12	✓9	✓12	✓3.1	✓18	✓9	✓12	✓2	✓1.0	✓4.4	✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

HTML

<element ondragleave = "script" >

Примеры, попробуйте сами

Событие dragleave

Нажмите ▶. Перетащите элемент в область приёма и наблюдайте изменения. Для проверки нужен указатель; сенсорное перетаскивание зависит от браузера.

index.html

HTML

<div class="dragndrop" id="event-target-1">
  <p draggable="true" id="anyid">Перемести меня!</p>
</div>

<div class="dragndrop" id="event-target-2"></div>
<p id="info"></p>

main.js

JavaScript

function dragStart(event) {
    event.dataTransfer.setData('Text', event.target.id)
}

function dragEnter(event) {
    if (event.target.className == 'dragndrop') {
        event.target.style.background = 'yellow'
        event.target.style.border = '3px dotted black'
    }
}

function dragLeave(event) {
    if (event.target.className == 'dragndrop') {
        event.target.style.background = ''
        event.target.style.border = ''
    }
}

function allowDrop(event) {
    event.preventDefault()
}

function drop(event) {
    var data = event.dataTransfer.getData('Text')
    event.target.appendChild(document.getElementById(data))
}

function dragging(event) {
    document.getElementById('info').innerHTML = 'Элемент &lt;p&gt; перетаскивается (ondrag)'
}
function dragEnd(event) {
    document.getElementById('info').innerHTML =
        'Перетаскиваемый элемент &lt;p&gt; опустился на объект перетаскивания (ondragend)'
}
document.getElementById('event-target-1').addEventListener('dragenter', dragEnter)
document.getElementById('event-target-1').addEventListener('dragleave', dragLeave)
document.getElementById('event-target-1').addEventListener('drop', drop)
document.getElementById('event-target-1').addEventListener('dragover', allowDrop)
document.getElementById('anyid').addEventListener('dragstart', dragStart)
document.getElementById('anyid').addEventListener('drag', dragging)
document.getElementById('anyid').addEventListener('dragend', dragEnd)
document.getElementById('event-target-2').addEventListener('dragenter', dragEnter)
document.getElementById('event-target-2').addEventListener('dragleave', dragLeave)
document.getElementById('event-target-2').addEventListener('drop', drop)
document.getElementById('event-target-2').addEventListener('dragover', allowDrop)

style.css

CSS

.dragndrop {
    float: left;
    width: 200px;
    height: 100px;
    margin-right: 50px;
    margin-bottom: 25px;
    padding: 30px;
    border: 3px solid orange;
    text-align: center;
    background: Cornsilk;
}

Отличия HTML 4.01 от HTML 5

Атрибут событий ondragleave является новым в HTML5.

Поддерживаемые теги

Все HTML теги.

HTML атрибут событий ondragleave