JavaScript HTML5 : issue with drag-and-drop for a gmail-like upload interface

Question

我的界面截图:

树的每个元素都是一个 <li>和一个 <a> .

每个文件夹都是一个用于文件上传的放置区，就像 gmail 上传拖放一样。

当我在包含我机器上的文件的文件夹上“拖入”时，我添加了一个样式:

代码:

var dropZoneElement = document.getElementById($this.attr('id'));

dropZoneElement.addEventListener('dragenter', onDragEnter, false);
dropZoneElement.addEventListener('dragleave', onDragLeave, false);
dropZoneElement.addEventListener('drop', onDrop, false);

function onDragEnter(event) {
  event.preventDefault();
  event.stopPropagation();
  $this.addClass('gmail-like');
}

function onDragLeave(event) {...}
function onDrop(event) {...}

但问题是，当我在文件夹上拖动链接(<a>)时(即使是没有目的地的假链接test，请参见屏幕截图)，页面添加要上传的样式(没有上传，它只是视觉):

• 为什么？
• 有什么想法可以禁用它吗？

我希望样式仅在我从我的机器上拖放文件时应用。

Answer 1

基本上，您需要检查拖动数据项类型 并验证它确实是一个文件而不是其他东西。此外，您可以禁用

看看 HTML5 draft描述拖放过程。 This tutorial也可以提供一些帮助。

最后，following SO问题应该给你一些具体的提示。