HTML 5拖放事件数据（e.dataTransfer）未定义

Question

我正在尝试使用HTML 5拖放制作文件上传器。问题是当目标div上的对象被删除并且触发了drop事件时，事件中的Data是未定义的。 event.dataTransfer的值是Undefined。

function uploader(elementSelector) {

    $(document).ready(function() {
        var element = $(elementSelector);
        dropBox(element);
    })

    function dropBox(DivSelector) {
        $(DivSelector)
            .css({
                'min-width': '300px',
                'max-width': '300px',
                'min-height': '300px',
                'background-color': 'grey'
            })
            .on('drop', function(e) {
                console.log(e);
                dropHandler(e);
            })
            .on('dragover', function(e) {
                e.preventDefault();
            });
    }

    function dropHandler(ev) {
        alert("Dropped");
        ev.preventDefault();
        // If dropped items aren't files, reject them
        var dt = ev.dataTransfer;
        if (dt.items) {
            // Use DataTransferItemList interface to access the file(s)
            for (var i = 0; i < dt.items.length; i++) {
                if (dt.items[i].kind == "file") {
                    var f = dt.items[i].getAsFile();
                    console.log("... file[" + i + "].name = " + f.name);
                }
            }
        } else {
            // Use DataTransfer interface to access the file(s)
            for (var i = 0; i < dt.files.length; i++) {
                console.log("... file[" + i + "].name = " + dt.files[i].name);
            }
        }
    }
}