我的界面截图:
树的每个元素都是一个 <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
,请参见屏幕截图),页面添加要上传的样式(没有上传,它只是视觉):
- 为什么?
- 有什么想法可以禁用它吗?
我希望样式仅在我从我的机器上拖放文件时应用。
最佳答案
基本上,您需要检查拖动数据项类型
并验证它确实是一个文件而不是其他东西。此外,您可以禁用
看看 HTML5 draft描述拖放过程。 This tutorial也可以提供一些帮助。
最后,following SO问题应该给你一些具体的提示。
关于JavaScript HTML5 : issue with drag-and-drop for a gmail-like upload interface,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8756895/