В JavaScript события - это действия, которые происходят в приложении. Они запускаются различными вещами, такими как ввод данных, отправка форм и изменения в элементе, такие как изменение размера, или ошибки, возникающие при запуске приложения и т. Д. Мы можем назначить обработчик событий для обработки этих событий. События, происходящие с элементами DOM, можно обрабатывать путем назначения обработчика событий свойствам объекта DOM для соответствующих событий. В этой статье мы рассмотрим обработчики событий ondragleave и ondragover и их использование.
Ondragleave
Свойство ondragleave элемента DOM позволяет нам установить функцию обработчика события для обработки события dragleave. Событие dragleave запускается, когда перетаскиваемый элемент или выделенный текст оставляют допустимую цель перетаскивания. Например, мы можем проверить, откуда перемещается перетаскиваемый блок, добавив следующий HTML-код:
<p id='drag-leave-tracker'> </p> <div id='drag-box' draggable="true"> </div> <div id='drop-zones'> <div id='drop-zone'> </div> <div id='drop-zone-2'> </div> </div>
Приведенный выше код лучше, чем передача dragBox непосредственно в appendChild, поскольку он гораздо более универсален, чем исходная версия функции обработчика событий. Мы можем прикрепить его к любому перемещаемому объекту, который захотим. Например, если у нас есть более одного перетаскиваемого элемента div, как в следующем HTML-коде:
<div id='drag-box' draggable="true"> </div> <div id='drag-box-2' draggable="true"> </div> <div id='drop-zone'> </div>
И мы меняем CSS, чтобы стилизовать оба перетаскиваемых элемента div, как в приведенном ниже коде:
#drag-box {
width: 100px;
height: 100px;
background-color: red;
}
#drag-box-2 {
width: 100px;
height: 100px;
background-color: green;
}
#drop-zone {
width: 200px;
height: 200px;
background-color: purple
}
Затем мы можем написать следующий код JavaScript, чтобы использовать одну функцию обработчика событий ondragleave для обработки удаления обоих перетаскиваемых элементов div, как в приведенном ниже коде:
const dragBox = document.getElementById('drag-box');
const dropZone = document.getElementById('drop-zone');
const dropZone2 = document.getElementById('drop-zone-2');
const dragLeaveTracker = document.getElementById('drag-leave-tracker');
const dragEnterHandler = (e) => {
if (e.toElement.id.includes('drop-zone')) {
e.toElement.appendChild(document.getElementById('drag-box'));
}
}
const dragLeaveHandler = (e) => {
if (e.toElement.id.includes('drop-zone')) {
dragLeaveTracker.innerHTML = `Leaving ${e.target.id}`;
}
}
dropZone.ondragenter = dragEnterHandler;
dropZone.ondragleave = dragLeaveHandler;
dropZone2.ondragenter = dragEnterHandler;
dropZone2.ondragleave = dragLeaveHandler;
В приведенном выше коде мы создали функцию dragLeaveHandler, которая имеет параметр e с объектом DragEvent для получения элемента DOM, от которого перемещаемый элемент перемещается. Он также может удаляться от самого себя, поскольку он также является допустимой целью для перетаскивания. Мы заботимся только о том, чтобы отойти от 2 drop-zone div элементов, поэтому мы добавили проверку, соответствует ли идентификатор элемента, от которого он удаляется, со строкой e.toElement.id.includes(‘drop-zone’). Затем мы устанавливаем свойство innerHTML элемента dragLeaveTracker DOM, чтобы отображать, от какого из 2 div элементов удаляется drag-box div.
Кроме того, у нас есть dragEnterHandler для обработки фактического перетаскивания элемента drag-box в элемент drop-zone div с помощью метода appendChild для добавления drag-box внутри drop-zone div.
ондраговер
Мы можем назначить обработчик событий свойству ondragover элемента DOM для обработки события dragover, которое запускается, когда элемент или выделенный текст перетаскивается через допустимую цель перетаскивания каждые несколько сотен миллисекунд. Например, мы можем добавить следующий HTML-код, чтобы добавить элемент p для отображения идентификатора элемента, в который перетаскивается перетаскиваемый элемент, перетаскиваемый элемент div и 2 элемента div, в которые мы можем перетащить перетаскиваемый элемент div, написав следующий код:
<p id='drag-over-tracker'> </p> <div id='drag-box' draggable="true"> </div> <div id='drop-zones'> <div id='drop-zone'> </div> <div id='drop-zone-2'> </div> </div>
Затем мы стилизуем элементы, которые есть в коде HTML, изменяя цвет и размер каждого блока с помощью следующего кода CSS:
#drag-box {
width: 100px;
height: 100px;
background-color: red;
}
#drop-zones {
display: flex;
}
#drop-zone {
width: 200px;
height: 200px;
background-color: purple
}
#drop-zone-2 {
width: 200px;
height: 200px;
background-color: green;
}
Мы помещаем 2 элемента div, в которые мы можем перетащить наш перетаскиваемый div, рядом, используя свойство и значение display: flex. Затем мы можем назначить нашу собственную функцию обработчика событий свойству ondragover наших 2 div элементов, куда мы можем перетащить наш перетаскиваемый элемент div, написав следующий код:
const dragBox = document.getElementById('drag-box');
const dropZone = document.getElementById('drop-zone');
const dropZone2 = document.getElementById('drop-zone-2');
const dragOverTracker = document.getElementById('drag-over-tracker');
const dragEnterHandler = (e) => {
if (e.toElement.id.includes('drop-zone')) {
e.toElement.appendChild(document.getElementById('drag-box'));
}
}
const dragOverHandler = (e) => {
console.log(e);
if (e.toElement.id.includes('drop-zone')) {
dragOverTracker.innerHTML = `Dragging over ${e.target.id}, coordinate (${e.clientX}, ${e.clientY})`;
}
}
dropZone.ondragenter = dragEnterHandler;
dropZone.ondragover = dragOverHandler;
dropZone2.ondragenter = dragEnterHandler;
dropZone2.ondragover = dragOverHandler;
В приведенном выше коде у нас есть функция dragOverHandler для обработки события dragover для элементов drop-zone и drop-zone-2 div. Когда элемент drag-box div перетаскивается на один из элементов drop-zone div, мы можем видеть, что оператор console.log внутри функции dragOverHandler выводит данные несколько раз, если мы удерживаем drag-box div над любым из drop-zone divs. Это связано с тем, что событие dragover запускается каждые несколько миллисекунд, когда мы перетаскиваем перетаскиваемый элемент на допустимую цель перетаскивания, которой являются 2 элемента drop-zone div. Пока мы перетаскиваем его на любой из 2 элементов div, мы будем видеть новый результат console.log. Кроме того, когда мы перемещаем drag-box внутри любого из 2 элементов drop-zone div, координата, в которой drag-box на экране, также будет обновляться, поскольку он перемещается с помощью мыши или сенсорного экрана. Мы увидим идентификатор элемента div, который перетаскивается drag-box, получив значение свойства e.toElement.id, а также мы получим идентификатор, который drag-box перетаскивает, из параметра e. Параметр e - это объект DragEvent, который имеет такие свойства, как координаты перетаскивания с помощью свойств clientX и clientY , а также элемент, который перетаскивается с помощью свойства toElement.
Кроме того, у нас есть dragEnterHandler для обработки фактического перетаскивания элемента drag-box в элемент drop-zone div, используя метод appendChild для добавления drag-box внутри drop-zone div.
Свойство ondragleave элемента DOM позволяет нам установить функцию обработчика события для обработки события dragleave. Событие dragleave запускается, когда перетаскиваемый элемент или выделенный текст оставляет допустимую цель перетаскивания. Это удобно для того, чтобы узнать, из какого целевого элемента перетаскивается перетаскиваемый элемент. Мы можем назначить обработчик событий свойству ondragover элемента DOM для обработки события dragover, которое запускается, когда элемент или выделенный текст перетаскивается через допустимую цель перетаскивания каждые несколько сотен миллисекунд. Это удобно для определения того, какой элемент мы перетаскиваем, а также для получения координат на экране, в котором находится перетаскиваемый элемент.
