Dragenter - заход курсора перетаскиваемого на принимающий блок.
"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 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 вам потребуется:
Два div с индивидуальными "id".
В одном прописываем
Любым способом нужно обратиться к тегу.
И используем 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, в него поместим id, для того, чтобы можно было (обратиться к этому тегу) :
Если вы используете id, то к нему можно обратиться напрямую, к нему добавляем "addEventListener" внутрь помещаем "dragenter":
new_area.addEventListener("dragenter", (event) => {
//код
});
Как только произойдет "dragenter" - нам нужно как-то это увидеть, поэтому используем 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".
Перетащите сюда.
Этим вы очень поможете проекту! Заранее огромное спасибо!
