Ответ 1

Событие dragenter происходит в тот момент, когда вы перетаскиваете что-то в целевой элемент, и затем оно останавливается. Событие перетаскивания происходит во время перетаскивания чего-либо до тех пор, пока вы его не отпустите.

Смотрите здесь:

$('.dropzone').on("dragover", function (event) {
    console.log('dragover');
});
$('.dropzone').on("dragenter", function (event) {
    console.log('dragenter');
});

Теперь посмотрите на консоль:

Как вы можете видеть, перетаскивание происходит один раз (когда вы перетаскиваете элемент на цель).

Но драгуверное событие происходит каждые несколько сотен миллисекунд.

Та же разница существует между перетаскиванием и перетаскиванием, перетаскивание происходит один раз, но перетаскивание происходит каждые несколько сотен миллисекунд.

Ответ 2

На основе dragenter и dragover документа MDN...

Перетащите над

Событие dragover запускается, когда элемент или выбор текста перетаскивается над допустимой целевой точкой (каждые несколько сотен миллисекунд).

DragEnter

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

dragover запускается после небольшой задержки (каждых 350 мс, я думаю), пока курсор остается над элементом.

Ответ 3

DragEnter:

Событие dragenter вызывается только тогда, когда при перетаскивании перетаскиваемого элемента курсор входит в область элемента DOM, к которому прикреплено событие ondragenter.

DragOver:

С другой стороны, событие dragover вызывается "постоянно" при перетаскивании перетаскиваемого элемента, и курсор оказывается на экране внутри области элемента DOM, где этому элементу DOM прикреплено событие ondragover..

Разница в том, что (при перетаскивании), когда курсор входит в зону сброса, dragover постоянно срабатывает (при перемещении мыши), пока dragenter срабатывает только один раз, когда курсор "вошел"

DEMO:

function dragover(e) {
 console.log("drag over")
}

function dragenter(e) {
  console.log("drag enter!!!")
}

#target{
  width: 200px;
  height: 200px;
  background: lightyellow;
  border: 1px solid gold;
}

div[draggable]{
  width: 60px;
  height: 60px;
  background: red;
}

<div draggable="true">Drag Me</div>
<div id="target" ondragover="dragover(event)" ondragenter="dragenter(event)">Drop Zone</div>