browser response on dragover - html5 drag and drop

Question

I am using html5 drag and drop.

When I drag an image or link from any given webpage, the browser-window is recognizing the dragover event.

For example dragging an image over a browser tab, makes the browser switching the window. Same works for example with dragging links to bookmarks.

Now when I drag my custom draggable element, there is no reaction from the browser. Is there a way to change this behavior?

Answer 1

I don't understand what you want to achieve, but it seems that you want to make something happens when you move your custom element outside the document or the window.

You should try binding a handler with a dragleave or something like that. Here is an example from another question:

var dropTarget = $('.dropTarget'),
    html = $('html'),
    showDrag = false,
    timeout = -1;

html.bind('dragenter', function () {
    dropTarget.addClass('dragging');
    showDrag = true; 
});
html.bind('dragover', function(){
    showDrag = true; 
});
html.bind('dragleave', function (e) {
    showDrag = false; 
    clearTimeout( timeout );
    timeout = setTimeout( function(){
        if( !showDrag ){ dropTarget.removeClass('dragging'); }
    }, 200 );
});

I think that could work for you, but for further help you should extend your issue's description.

Also I ll leave some HTML5 drag and drop docs here