1

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

这是我目前拥有的代码。如果我将文件拖到 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>
4

1 回答 1

2

首先，如果您使用的是 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(); }
});

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

那应该让你继续前进。

在 JsBin 上查看

于 2013-03-15T21:43:42.200 回答