Dragleave - когда перетаскиваемый элемент покидает блок..

"dragleave". Событие dragleave наступает, когда перетаскиваемый элемент покидает блок..

Описание dragleave.

1. Что такое dragleave - синтаксис.
2. Пример использования dragleave + addEventListener
3. Пример использования ondragleave

Что такое dragleave - синтаксис.

В синтаксисе "dragleave" - используется два варианта:

Метод addEventListener.

И DragEvent.

Синтаксис dragleave:

addEventListener("dragleave", (event) => {});

ondragleave = (event) => {};

Для того, чтобы понять, как работает dragleave нам понадобится два примера: где разберем эти два "синтаксиса dragleave"

Пример использования dragleave + addEventListener

Для того, чтобы сделать пример с "dragleave " вам потребуется:

Используем тег html, пусть это будет div, нужно поставить атрибут (draggable) со значением (true), с надписью - "Нажмите мышку и перетащите за пределы блока..":

<div class="kod" id=new_area draggable="true">Нажмите мышку и перетащите за пределы блока.. </div>.

Javascript.

Если вы используете id, то к нему можно обратиться напрямую, к нему добавляем "addEventListener" внутрь помещаем "dragleave ":

new_area.addEventListener("dragleave ", (event) => {

//код

});

Как только произойдет "dragleave " - нам нужно как-то это увидеть, поэтому используем innerHTML для изменения текста на "Вы вышли за объект"

new_area . innerHTML = "Вы вышли за объект";

Соберем весь код:

Пример кода с "dragleave".

Html:

<div id=new_area draggable="true">Нажмите мышку и перетащите за пределы блока.. </div>

Js:

<script>

new_area.addEventListener("dragleave", (event) => {

new_area. innerHTML = "Вы вышли за объект" ;

});

</script>

Пример выполнение кода с "dragleave".

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

Нажмите мышку и перетащите за пределы блока..

Пример использования paragraph_ondragleave

Для того, чтобы сделать пример второго синтаксиса с "paragraph_ondragleave" вам понадобится:

Почти тоже самое, что и выше, но, только часть "ondragleave" - будет размещаться в теге:

<div id=new_area2 ondragleave= "myFoo2(event)" draggable="true">
Зажми мышку и перемести меня за пределы блока!
</div>

Пропишем каждую из функций:

function myFoo2( event ) {

new_area2 .innerHTML = "Вы зашли на объект";

}

Соберем весь код вместе:

Код примера "ondragleave".

Html:

<div id=new_area2 ondragleave= "myFoo2(event)" draggable="true"> Зажми мышку и перемести меня за пределы блока!</div>

Js:

<script>

function myFoo2( event ) {

new_area2 .innerHTML = "Вы покинули объект";

}

</script>

Выполнение Кода примера "ondragleave".