Dragenter - заход курсора перетаскиваемого на принимающий блок.

"dragenter". Событие dragenter наступает при заходе курсора перетаскиваемого элемента на принимающий блок, когда пользователь перетаскивает элемент или выделенный текст на второй элемент.

Описание dragenter.

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

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

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

Метод addEventListener.

И DragEvent.

Синтаксис dragenter:

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

ondragenter = (event) => {};

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

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

<element ondragenter="myScript">

См. здесь.

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

<script>

object.ondragenter = function(){myScript};

</script>

Использование dragenter JavaScript используя addEventListener() method:

<script>

object . <a href=https://dwweb.ru/addeventlistener.html target=_blank>addEventListener</a>("dragenter", myScript);

</script>

См. здесь




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

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

2 Блока div.

Один с draggable="true".

Второй с атрибутами: id=new_area2 ondragenter = "myFoo2(event)"

И получим:

<div draggable="true">Зажми мышку и перемести меня!</div>
<div id=new_area2 ondragenter = "myFoo2(event)"> Перетащите сюда. </div>

Напишем функцию:

function myFoo2( event ) {

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

}

Соберем код:

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

Html:

<div draggable="true">Зажми мышку и перемести меня!</div>

<div id=new_area2 ondragenter = "myFoo2(event)"> Перетащите сюда. </div>

Js:

<script>

function myFoo2( event ) {

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

}

</script>

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

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

И переместите на второй элемент... с надписью "Перетащите сюда."

Зажми мышку и перемести меня!

Перетащите сюда.




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

Для того, чтобы создать код с "ondragenter" = function вам потребуется:

Html:

Два div с индивидуальными "id".

В одном прописываем draggable="true".

Javascript :

Любым способом нужно обратиться к тегу.

И используем innerHTML, чтобы вывести во второй "div" результат :

new_area_3.ondragenter = function(event) {

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

};

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

Код в сборе использования ondragenter.

Html:

<div draggable="true" id=new_area_3>Нажмите мышку и перетащите...</div>

<div class="kod" id=send_3>Перетащите сюда.</div>

Javascript :

<script>

new_area_3.ondragenter = function(event) {

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

};

</script>

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

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

Нажмите мышку и перетащите...
Перетащите сюда.



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

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

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

<div draggable="true"> Нажмите мышку и перетащите... </div>.

И второй div, в него поместим id, для того, чтобы можно было (обратиться к этому тегу) :

<div id=new_area> Перетащите сюда. </div>

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

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

//код

});

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

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

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

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

Html:

<div draggable="true"> Нажмите мышку и перетащите... </div>

<div id=new_area> Перетащите сюда. </div>

Js:

<script>

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

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

});

</script>

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

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

И перемещайте его на второй "div" - в этот момент сработает "dragenter".

Нажмите мышку и перетащите...



Перетащите сюда.