Changing Mouse Cursor for HTML5 Drag Drop Files (GMail Drag Drop)

Question

I\'m trying to reproduce the way GMail handles html5 drag/drop attachments -- where as soon as you drag files over the page, it displays a new element for you to drop them o

Answer 1

@Langdon - Thanks for pointing out exactly what I needed! I have upvoted it.

After spending so many hours I got that suggestion working exactly as intended.

I made use of effectAllowed in combination with dropEffect to provide visual cues when performing drag drop operations. Completely cross-browser!

$(document).on('dragstart dragenter dragover', function(event) {    
    // Only file drag-n-drops allowed, http://jsfiddle.net/guYWx/16/
    if ($.inArray('Files', event.originalEvent.dataTransfer.types) > -1) {
        // Needed to allow effectAllowed, dropEffect to take effect
        event.stopPropagation();
        // Needed to allow effectAllowed, dropEffect to take effect
        event.preventDefault();

        $('.dropzone').addClass('dropzone-hilight').show();     // Hilight the drop zone
        dropZoneVisible= true;

        // http://www.html5rocks.com/en/tutorials/dnd/basics/
        // http://api.jquery.com/category/events/event-object/
        event.originalEvent.dataTransfer.effectAllowed= 'none';
        event.originalEvent.dataTransfer.dropEffect= 'none';

         // .dropzone .message
        if($(event.target).hasClass('dropzone') || $(event.target).hasClass('message')) {
            event.originalEvent.dataTransfer.effectAllowed= 'copyMove';
            event.originalEvent.dataTransfer.dropEffect= 'move';
        } 
    }
}).on('drop dragleave dragend', function (event) {  
    dropZoneVisible= false;

    clearTimeout(dropZoneTimer);
    dropZoneTimer= setTimeout( function(){
        if( !dropZoneVisible ) {
            $('.dropzone').hide().removeClass('dropzone-hilight'); 
        }
    }, dropZoneHideDelay); // dropZoneHideDelay= 70, but anything above 50 is better
});

Answer 2

Did some digging through the source and found that you're supposed to set event.dataTransfer.dropEffect = 'move'; inside your dragover event handler. Googled for dropEffect to read more and found:

dataTransfer.dropEffect

Controls the feedback that the user is given during the dragenter and dragover events. When the user hovers over a target element, the browser's cursor will indicate what type of operation is going to take place (e.g. a copy, a move, etc.). The effect can take on one of the following values: none, copy, link, move.

from: http://www.html5rocks.com/en/tutorials/dnd/basics/

Edit: Here's what I ended up with: http://jsfiddle.net/guYWx/16/

Had to do one additional trick to get it working perfectly. Did this so the dropper wouldn't appear when you select text and drag it around the page:

if ($.inArray('Files', e.dataTransfer.types) > -1)

Answer 3

You have to change cursor CSS property.

You find a list of the different values of cursor here.

You can also specify a custom cursor image with cursor: url('foo.png');.