File Drag & Drop HTML5 issue

Question

I'm trying to implement drag & drop feature for files from desktop to browser and I've encountered with 2 problems:

I need event that fires when at dragging process when cursor leaves browser's window. You can see such mechanism at mail.google.com - the text 'Drop files here' is dissapeared when user drags file to somewhere else. I've tried all dragging events, but they didn't help.

The second problem is I need to set cursor while user is dragging files over all elements to "none" except 'droplabel' div. I know that line of code below changes cursor, but how to change it to normal when cursor has reached 'droplabel' div?

evt.dataTransfer.effectAllowed = 'move';

Anybody know how to solve this problem?

<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>

tungd tungd · Accepted Answer · 2012-01-19T03:29:43

There is a GoogleIO slide show where they demonstrate DnD feature here http://www.htmlfivewow.com/slide19. If you look at the code (http://www.htmlfivewow.com/js/slide-content.js), you can see in the "DND" section they have handlers for ondragenter and ondragleave that toggle the 'hover' class of the element.

Here is a little fiddle http://jsfiddle.net/cHfCh/

File Drag & Drop HTML5 issue

1 Answers