Не работает событие drop в drag'n'drop
Изучаю drag'n'drop. У меня не работает событие drop, которое я пытаюсь вызвать на элементе li. В чем причина?
const list = [
'Олег',
'Владимир',
'Света',
'Аркадий',
'Таисия',
'Евгений',
]
const ul = document.getElementById('draggable-list');
list.forEach((item, index) => {
const li = document.createElement('li');
li.innerHTML = `${index} ${item}`
li.setAttribute('draggable', 'true');
li.setAttribute('data-index', String(index));
li.addEventListener('dragenter', function () {
this.classList.add('over');
})
li.addEventListener('dragleave', function () {
this.classList.remove('over');
})
li.addEventListener('dragstart', function () {
console.log('startIndex = ', this.dataset.index);
})
li.addEventListener('drop', function () {
console.log('не вызывается');
})
ul.append(li);
});
<ul id="draggable-list">
</ul>