HTML5文档丢弃事件有时不会触发

Question

我正在使用HTML5拖放api构建拖动功能。请在jsfiddle https://jsfiddle.net/dvc142uj/

中查看它的小版本

它工作正常，但有时Document drop事件没有触发，这无法设置位置变化。

document.addEventListener('drop', function drop(e) {
    e.preventDefault();
    console.log('document.addEventListener("drop"), sometimes not triggering');

    var data = JSON.parse(e.dataTransfer.getData("text/plain"));
    data.left = parseInt(data.left, 10);
    data.top = parseInt(data.top, 10);

    dragger.style.transform = '';
    dragger.style.left = (e.clientX + data.left) + 'px';
    dragger.style.top = (e.clientY + data.top) +'px';
}, false);

我的控制台记录。

始终按预期激活元素dragend事件。我想知道，如何解决这个问题？