CODEWITHSUNDEEP
htmlinternet-explorergoogle-chromedrag-and-drop
el_shayan
el_shayan

Reputation: 2845

Cursor unpleasantly changes during drag operation in nested elements

As you can see in this live example: http://jsfiddle.net/VU328/ when we are trying to drag the main draggable element (div.outer) every time mouse goes over div.inner or even when it goes outside the draggable box (i.e. goes inside body area) cursor quickly changes to not-allowed and immedialtely changes back to normal move.

There is the markup to show a nested situation:

<div class='outer' draggable='true' >
    <div class='inner' >
        abc
    </div>
</div>

And this is the minimum Javascript code that allows default drag effect:

$(document.body).bind('dragover', function(e) {
    e.preventDefault();
});

Mockup cursor movement

It happens at least on Windows and in Chrome (36.0.1985.125 m) and in IE (11.0.9600.17207).

Is there any "standard" fix which works with html5 native drag API? (i.e. not with replacing cursor with some image or covering div.outer with another div or using jquery-ui or similar libraries)

Upvotes: 3

Views: 2146

Answers (1)

el_shayan
el_shayan

Reputation: 2845

Found it!

You have to prevent default behaviour of dragenter too:

$(document.body).bind('dragenter', function(e) {
    e.preventDefault();
});

Upvotes: 5

Related Questions