Javascript HTML/CSS-用于拖放的完整页面覆盖_Javascript_Html_Css_Drag And Drop

Javascript HTML/CSS-用于拖放的完整页面覆盖

javascript html css

Javascript HTML/CSS-用于拖放的完整页面覆盖,javascript,html,css,drag-and-drop,Javascript,Html,Css,Drag And Drop,我在创建一个完整的页面覆盖来识别拖放时遇到了一些问题。如果用户在页面上从计算机拖动文件，将其放在任何位置都会触发上载。但是，我很难获得一个完整的页面覆盖，当文件被删除时，它会被识别，并且不会阻止页面上的任何悬停元素。这是我目前的代码 HTML: JS可以识别该下降： var dropZone = document.getElementById('dropZone'); dropZone.addEventListener('dragover', handleDragOver, false); dr

我在创建一个完整的页面覆盖来识别拖放时遇到了一些问题。如果用户在页面上从计算机拖动文件，将其放在任何位置都会触发上载。但是，我很难获得一个完整的页面覆盖，当文件被删除时，它会被识别，并且不会阻止页面上的任何悬停元素。这是我目前的代码

HTML:

JS可以识别该下降：

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

这应该会有所帮助。下面是一个关于HTML5文件拖放API的示例。下面是API的示例。

我通过将drop zone id添加到覆盖整个页面的标记中解决了这个问题。

对于这种仅在拖动内容时显示的覆盖，您应该处理不同元素上的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>

删除html中

符号周围的空格。你能澄清一下你的意思吗：“…当文件被删除时，不会阻止页面上的任何悬停元素。”我需要一个div来识别文件何时被删除到页面上。如果div设置为高于所有其他元素，它就像一个盾牌，因此没有效果（悬停并单击）。可能是因为我有这个问题而粘贴结果？您是否在某个地方缺少“body”？

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

<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>

function handleDragEnter(event) {
  showMyDropZoneOverlay();
}
function handleDragLeave(event) {
  hideMyDropZoneOverlay();
}
function handleDrop(event) {
  ...
}