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

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

Описание dragenter.

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

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

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

Метод addEventListener.

И DragEvent.

Синтаксис dragenter:

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

ondragenter = (event) => {};

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

2. Пример использования 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".

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

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

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

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

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

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

Всего комментариев : Comments+ 2.0

+ =