1

ドラッグ + ドロップを認識するフル ページ オーバーレイの作成に問題があります。ユーザーが自分のコンピューターからページ上にファイルをドラッグした場合、ファイルを任意の場所にドロップすると、アップロードがトリガーされます。ただし、ファイルがドロップされたときに認識され、ページ上のホバー要素をブロックしないフルページオーバーレイを取得するのに問題があります。これが私の現在のコードです。

HTML:

<div id = 'dropZone'></div>

CSS:

#dropZone
{
    background: gray;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: .8;
}

ドロップを認識する JS:

var dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

http://jsfiddle.net/V37cE/

4

3 に答える 3

0

このようなオーバーレイをコンテンツのドラッグ時にのみ表示するには、さまざまな要素で dragenter および dragleave イベントを処理する必要があります。

<body>
 <div>...</div>
 <div id="myDropZone" ondragenter="handleDragEnter" style="z-index: 1">

   <div id="myDropOverlay" ondragleave="handleDragLeave" onDrop="handleDrop" hidden style="z-index: 2">
     Drop your file here
   </div>

   <div>
     content covered by the drop zone overlay while dragging
   </div>
 </div>
</body>

次に、js でオーバーレイを表示/非表示にします。

function handleDragEnter(event) {
  showMyDropZoneOverlay();
}
function handleDragLeave(event) {
  hideMyDropZoneOverlay();
}
function handleDrop(event) {
  ...
}
于 2016-05-26T20:04:07.267 に答える
-1

ページ全体をカバーするタグにドロップゾーンIDを追加することで、問題を解決しました。

于 2012-09-14T00:20:30.007 に答える
-1

これは役立つはずです。HTML5 File Drag & Drop API に関する優れたチュートリアルを次に示します。APIに関する w3.org のドキュメントは次のとおりです。

于 2012-09-13T04:20:37.973 に答える