jquery - HTML5 ファイルのドラッグ アンド ドロップは、最初のドロップ後に機能しなくなりました

Question

HTML5 ドラッグ アンド ドロップを使用して、ユーザーがファイルを自分のページに (O/S から) ドラッグできるようにしています。これは実際にうまく機能し、ファイルがアップロードされ、誰もが満足しています。

ただし、アップロードが終了したかキャンセルされたかに関係なく、ドラッグ機能はもう機能していないようです。

ここにいくつかのコードがあります (またはjsFiddleに移動します):

HTML:

<div id="MainDiv">
    <div id="DropZone" style="display: none;">Drop Files Here</div>
</div>

CSS:

#MainDiv {
    height: 400px;
    width: 100%;
    border: 1px solid black;
}

#DropZone {
    position: absolute;
    height: 50%;
    width: 50%;
    border: thick dashed blue;
    border-radius: 12px;
    top: 10%;
    left: 25%;
    text-align: center;
    font-size: x-large;
    padding-top: 20px;
    color: blue;
}

JavaScript:

$().ready(function () {
    $('#DropZone').on("dragenter dragend dragleave dragover drop", function (e) {
        e.preventDefault();
    });

    $.fn.dndhover = function (options) {
        return this.each(function () {
            var self = $(this);
            var collection = $();

            self.on('dragenter', function (event) {
                if (collection.size() === 0) {
                    self.trigger('dndHoverStart');
                }
                collection = collection.add(event.target);
            });

            self.on('dragleave', function (event) {
                setTimeout(function () {
                    collection = collection.not(event.target);
                    if (collection.size() === 0) {
                        self.trigger('dndHoverEnd');
                    }
                }, 1);
            });
        });
    };

    $('#MainDiv').dndhover().on({
        'dndHoverStart': function (event) {
            $('#DropZone').show();
            event.preventDefault();
            return false;
        },
            'dndHoverEnd': function (event) {
            $('#DropZone').hide();
            event.preventDefault();
            return false;
        }
    });

    $('#DropZone').bind('drop', function (e) {
        // Show div with dropped files .. user chooses upload or cancel
        $('#DropZone').hide(); // This would eventually happen regardless of success or failure
        return false;
    });
});

maindiv にファイルをドラッグすると、ドロップゾーンが期待どおりに表示されます。そこに任意の数のファイルをドロップすると、すべてが期待どおりに機能します。ただし、それが完了したら、2 番目のファイル (またはファイルのグループ) を maindiv にドラッグしても、何も起こりません。

私が間違っているところの手がかりはありますか？