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

23.03.2023 Марат 325 js | drag_drop | js_events |

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

Описание dragenter.

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