Disable animation for drag and drop Chrome/Safari

Question

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

In the example here (scroll to the bottom and try the last example), when you drag out the element and don't drop it anywhere, it is positioned back to its default place and there is an animation for positioning to its default place (Chrome/Safari). I would like to disable that animation.

Is there some sort of special property for webkit, that will allow me to do this?

I don't see any animation on Windows. – Derek 朕會功夫 Aug 25 '15 at 13:58 — Derek 朕會功夫, Aug 25 '15 at 13:58
nobody ever noticed that? – puppeteer701 Aug 27 '15 at 09:59 — puppeteer701, Aug 27 '15 at 09:59
I don't think you should change system behavior. – Derek 朕會功夫 Aug 27 '15 at 13:12 — Derek 朕會功夫, Aug 27 '15 at 13:12
but it is stupid system behaviour. – puppeteer701 Aug 27 '15 at 16:16 — puppeteer701, Aug 27 '15 at 16:16

score 1 · Answer 1 · answered Oct 30 '19 at 16:59

1

Found answer here and it works in my case https://stackoverflow.com/a/51697038/1770586

In order to prevent the animation, you need the drop event to fire. For the drop event to fire, you need to call preventDefault() in the handler for dragover.

document.addEventListener('dragover', function(e) { e.preventDefault() })

answered Oct 30 '19 at 16:59

jaromudr

151
8

1

Just want to add that this isn't fool proof: pressing the escape key for example will cancel the drag without firing your drop handler. – Alex Guerra Nov 24 '20 at 20:37

Disable animation for drag and drop Chrome/Safari

1 Answers1