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 に答える