Dragleave - когда перетаскиваемый элемент покидает блок..
"dragleave" оно же "ondragleave". Событие dragleave наступает, когда перетаскиваемый элемент покидает блок..
Описание dragleave.
- Что такое dragleave - синтаксис.
- Пример использования ondragleave
- Пример использования ondragleave 2
- Пример использования dragleave + addEventListener
Что такое dragleave - синтаксис.
В синтаксисе "dragleave" - используется два варианта:
Метод addEventListener.
И DragEvent.
Синтаксис dragleave:
addEventListener("dragleave", (event) => {});
ondragleave = (event) => {};
Для того, чтобы понять, как работает dragleave нам понадобится два примера: где разберем эти два "синтаксиса dragleave"
Использование dragleave в HTML:
<element ondragleave="myScript">
см. здесьИспользование dragleave в JavaScript:
object.ondragleave = function(){myScript};
см. здесьИспользование dragleave в JavaScript, применяя addEventListener() method:
object . addEventListener("dragleave", myScript);
см. здесь Пример использования ondragleave
Для того, чтобы сделать пример синтаксиса с "ondragleave" вам понадобится:
Используем :
И получим:
Зажми мышку и перемести меня за пределы блока!
</div>
Пропишем функцию:
function myFoo2( event ) {
new_area2 .innerHTML = "Вы зашли на объект";
}
Соберем весь код:
Код примера "ondragleave".
Html:
<div id=new_area2 ondragleave= "myFoo2(event)" draggable="true"> Зажми мышку и перемести меня за пределы блока!</div>
Js:
<script>
function myFoo2( event ) {
new_area2 .innerHTML = "Вы покинули объект";
}
</script>
Выполнение Кода примера "ondragleave".
Ну и далее, чтобы увидеть действие "ondragleave" - зажмите мышкой ниже идущий текст.
И переместите его за пределы блока..."
Пример использования ondragleave 2.
Для того, чтобы использовать второй вариант "ondragleave ":
object.ondragleave = function(){myScript};
Вам понадобится:
Используем div в него помещаем id:
+ "draggable":
Далее кусочек кода javascript:
new_area3.ondragleave = function(event) {
new_area3. innerHTML = "Вы вышли с объекта" ;
};
Соберем весь код использования ondragleave :
Html :
<div class="new_kod" id=new_area3 draggable="true">Пункт №2 -перетащи меня за пределы блока.. </div>
Javascript :
<script>
new_area3.ondragleave = function(event) {
new_area3. innerHTML = "Вы вышли с объекта" ;
};
</script>
Пример использования dragleave + addEventListener
Для того, чтобы сделать пример с "dragleave" с addEventListener вам потребуется:
Используем тег html, пусть это будет div, нужно поставить атрибут (draggable) со значением (true), с надписью - "Нажмите мышку и перетащите за пределы блока..":
Если вы используете id, то к нему можно обратиться напрямую, к нему добавляем "addEventListener" внутрь помещаем "dragleave ":
new_area.addEventListener("dragleave ", (event) => {
//код
});
Как только произойдет "dragleave " - нам нужно как-то это увидеть, поэтому используем innerHTML для изменения текста на "Вы вышли за объект"
Соберем весь код:
Пример кода с "dragleave".
Html:
<div id=new_area draggable="true">Нажмите мышку и перетащите за пределы блока.. </div>
Js:
<script>
new_area.addEventListener("dragleave", (event) => {
new_area. innerHTML = "Вы вышли за объект" ;
});
</script>
Пример выполнение кода с "dragleave".
Для того, чтобы увидеть действие "dragleave" зажмите ниже идущий текст и попробуйте его перетащить... за пределы блока - в этот момент сработает "dragleave" - покидание зажатой мышкой элемента.
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: