Question

我正在尝试实施拖放功能从桌面到浏览器的文件的删除功能，我遇到了2个问题：

我需要在光标离开浏览器窗口时在拖动过程中触发的事件。您可以在mail.google.com上看到此类机制 - 当用户将文件拖到其他位置时，文本“在此处删除文件”会消失。我已经尝试了所有拖动事件，但他们没有帮助。

第二个问题是我需要在用户将所有元素上的文件拖动到“无”时设置光标，除了'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>

Answer 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问题

1 个答案: