Question

我想弄清楚如何拖放文件。我已经阅读了许多教程和示例，并认为我知道如何去做，但我无法让绝对的基本部分工作。

这是我目前的代码。如果我将文件拖到filedropper div上，浏览器只会加载文件而不是给我下拉警报。我错过了什么？

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
    <script language='javascript'>
    $(document).ready(function() {
        $('#filedropper').on('drop', function(e){
            e.preventDefault();
            alert('drop');
            return false;
        });
    });
    </script>
    <div id='filedropper' style='height:100px;width:100px;background:yellow'></div>
</body>
</html>

Answer 1

首先，如果您使用IE，这可能根本不起作用。 IE（IE 10除外）不支持文件拖放。

其次，您需要捕获并阻止$（document）.ready中的dragOver函数。

$('#filedropper').on('dragover', function(e) {
    if (e.stopPropagation) { e.stopPropagation(); } // The if checks are excessive but safest
    if (e.preventDefault) { e.preventDefault(); }
});

This是我学习如何做的主要参考。

这应该让你去。

Check it out on JsBin

为什么我不能让文件丢弃与jquery一起工作？

1 个答案: