Question

我正在使用HTML5拖放功能drop让用户将文件拖到我的页面（从他们的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上，则dropzone会按预期显示。如果您删除任意数量的文件，一切都按预期工作。但是，当它完成后，如果你将第二个文件（或一组文件）拖过maindiv，就不会再发生任何事情。

我出错的任何线索？

第一次删除后，HTML5文件拖放不再有效

0 个答案: