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

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

Описание dragleave.

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

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

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

Метод addEventListener.

И DragEvent.

Синтаксис dragleave:

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

ondragleave = (event) => {};

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

Использование dragleave в HTML:

<element ondragleave="myScript">

см. здесь


Использование dragleave в JavaScript:

object.ondragleave = function(){myScript};

см. здесь


Использование dragleave в JavaScript, применяя addEventListener() method:

object . addEventListener("dragleave", myScript);

см. здесь




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

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

Используем :

div.

+ draggable="true".

+ ondragleave= "myFoo2(event)"

+ id=new_area2

И получим:

<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".

Ну и далее, чтобы увидеть действие "ondragleave" - зажмите мышкой ниже идущий текст.

И переместите его за пределы блока..."

Нажми на меня левой кнопкой мыши и перемести меня за пределы блока!



Пример использования ondragleave 2.

Для того, чтобы использовать второй вариант "ondragleave ":

object.ondragleave = function(){myScript};

Вам понадобится:

Html:

Используем div в него помещаем id:

id=new_area3

+ "draggable":

draggable="true

Javascript

Далее кусочек кода javascript:

new_area3.ondragleave = function(event) {

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

};

Соберем весь код использования ondragleave :

Html :

<div class="new_kod" id=new_area3 draggable="true">Пункт №2 -перетащи меня за пределы блока.. </div>

Javascript :

<script>

new_area3.ondragleave = function(event) {

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

};

</script>

Пункт №2 -перетащи меня за пределы блока..



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

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

Используем тег 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" - покидание зажатой мышкой элемента.

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