Не работает событие 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>


Ответы (0 шт):