Прослушиватели событий перетаскивания в JavaScript: методы и методы обработки событий перетаскивания

В JavaScript вы можете использовать прослушиватели событий для обработки событий перетаскивания. Вот некоторые методы и приемы, связанные с прослушивателями событий перетаскивания:

  1. addEventListener: вы можете использовать метод addEventListener, чтобы прикрепить прослушиватель событий перетаскивания к HTML-элементу. События перетаскивания, которые вы можете прослушивать: dragstart, drag, dragend, dragenter, dragleave, перетаскиваниеи drop.

Пример:

const element = document.getElementById('myElement');
element.addEventListener('dragstart', handleDragStart);
element.addEventListener('drag', handleDrag);
element.addEventListener('dragend', handleDragEnd);
element.addEventListener('dragenter', handleDragEnter);
element.addEventListener('dragleave', handleDragLeave);
element.addEventListener('dragover', handleDragOver);
element.addEventListener('drop', handleDrop);
function handleDragStart(event) {
  // Handle the dragstart event
}
function handleDrag(event) {
  // Handle the drag event
}
function handleDragEnd(event) {
  // Handle the dragend event
}
function handleDragEnter(event) {
  // Handle the dragenter event
}
function handleDragLeave(event) {
  // Handle the dragleave event
}
function handleDragOver(event) {
  // Handle the dragover event
}
function handleDrop(event) {
  // Handle the drop event
}
  1. ondragstart, ondrag, ondragend: Альтернативно вы можете назначить функции обработчика событий непосредственно свойствам ondragstart, ondragи ondragendобъекта элемент.

Пример:

const element = document.getElementById('myElement');
element.ondragstart = handleDragStart;
element.ondrag = handleDrag;
element.ondragend = handleDragEnd;
function handleDragStart(event) {
  // Handle the dragstart event
}
function handleDrag(event) {
  // Handle the drag event
}
function handleDragEnd(event) {
  // Handle the dragend event
}

Вот некоторые методы, которые можно использовать для прослушивания событий перетаскивания в JavaScript.