文件拖放 HTML5 问题
Posted
技术标签:
【中文标题】文件拖放 HTML5 问题【英文标题】：File Drag & Drop HTML5 issue 【发布时间】：2012-02-13 11:32:09 【问题描述】：我正在尝试实现文件从桌面到浏览器的拖放功能，但遇到了 2 个问题：
我需要在光标离开浏览器窗口时在拖动过程中触发的事件。 您可以在 mail.google.com 上看到这种机制 - 当用户将文件拖到其他地方时，文本“在此处放置文件”会消失。 我已经尝试了所有拖动事件，但它们没有帮助。
第二个问题是我需要在用户将文件拖过所有元素时设置光标到“none”，除了“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>
【问题讨论】：
【参考方案1】：有一个 GoogleIO 幻灯片，他们在此处演示 DnD 功能http://www.htmlfivewow.com/slide19。如果您查看代码 (http://www.htmlfivewow.com/js/slide-content.js)，您可以在“DND”部分看到它们有处理程序 ondragenter 和 ondragleave 来切换 ' hover' 元素的类。
这是一个小问题http://jsfiddle.net/cHfCh/
【讨论】：
以上是关于文件拖放 HTML5 问题的主要内容，如果未能解决你的问题，请参考以下文章