0
私はブラウザにデスクトップからファイルのドラッグ&ドロップ機能を実装しようとしていると私は2つの問題に遭遇しました：ファイルのドラッグ＆ドロップHTML5問題
私は、イベントを必要とする火災時にドラッグする過程で、ときにカーソルの葉ブラウザのウィンドウ。 mail.google.comでそのような仕組みを見ることができます。ユーザーがファイルを別の場所にドラッグすると、「ここにファイルをドロップする」というテキストが消えてしまいます。 私はすべてのドラッグイベントを試しましたが、助けにはなりませんでした。
2番目の問題は、ユーザーが「droplabel」div以外のすべての要素を「なし」にファイルをドラッグしているときにカーソルを設定する必要があることです。 以下のコード行はカーソルを変更することを知っていますが、カーソルが 'droplabel' divに達したときにそれを通常に変更する方法はありますか？
evt.dataTransfer.effectAllowed = 'move';
誰でもこの問題の解決方法を知っていますか？
<html>
<body>
<form>
<div id="droplabel" style="width:200px;height:200px;background-color:red">Drop file here...</div>
<script>
function handleDrop(evt) {
evt.stopPropagation(); // Stops some browsers from redirecting.
evt.preventDefault();
var files = evt.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
console.log(files[i].name);
}
}
function handleDragOver(evt) {
if (evt.preventDefault) {
evt.preventDefault(); // Necessary. Allows us to drop.
}
return false;
}
document.getElementById('droplabel').ondrop = handleDrop;
document.getElementById('droplabel').ondragover = handleDragOver
var body = document.getElementsByTagName('body')[0];
document.ondragover = function (evt) {
evt.preventDefault();
}
document.ondrop = function (evt) {
evt.stopPropagation(); // Stops some browsers from redirecting.
evt.preventDefault();
}
</script>
</form>
</body>
</html>