文件拖放 HTML5 问题答案

【问题标题】：File Drag & Drop HTML5 issue文件拖放 HTML5 问题
【发布时间】：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>

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

有一个 GoogleIO 幻灯片，他们在此处演示 DnD 功能http://www.htmlfivewow.com/slide19。如果您查看代码 (http://www.htmlfivewow.com/js/slide-content.js)，您可以在“DND”部分看到它们有处理程序 ondragenter 和 ondragleave 来切换 ' hover' 元素的类。

这是一个小问题http://jsfiddle.net/cHfCh/

【讨论】：