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

23.03.2023 Марат 126 0 js|drag_drop|js_events

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

Описание dragenter.

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

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

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

Метод addEventListener.

И DragEvent.

Синтаксис dragenter:

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

ondragenter = (event) => {};

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

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

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

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

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

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

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

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

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