17

I am learning about Drag & Drop. I have copied a W3Schools example in JSFiddle.

The W3School example calls preventDefault() in the drop event:

function drop(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

Yet, I don't understand the need when reading documentation. When I remove this call, the example still works fine:

function drop(ev) {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

So, what is the use of this call to preventDefault()? Do I really need it? If yes why?

2 Answers 2

24

It's a way of making sure that you're in full control of what's happening so it's no harm to leave it in because you can never be sure that the browser-specific implementation of the drag and drop api spec won't be working against you, for example as seen here (emphasis mine)

You must cancel the default action for ondragenter and ondragover in order for ondrop to fire. In the case of a div, the default action is not to drop. This can be contrasted with the case of an input type=text element, where the default action is to drop. In order to allow a drag-and-drop action on a div, you must cancel the default action

Note: The linked exampled doesn't actually use e.preventDefault; it uses an older IE-specific method which is window.event.returnValue=false but this has the same effect as e.preventDefault

So I'd be inclined to say that whilst in many cases it won't make a difference, you should include it anyway just to cover the cases for some of your users where it does.

4
  • 3
    This doesn't explain the need for a preventDefault in the drop handler. The quoted text doesn't mention it either. Commented Mar 23, 2016 at 19:13
  • 1
    @Glenn Jorde - The quoted text cites a specific example where you have to cancel the default event action in order for the drop to work. Granted, it doesn't use e.preventDefault, it uses the older IE-specific style of window.event.returnValue=false but since these are equivalent, I didn't see the need to mention it. The point is though, it's no harm to leave it in just in case you come across a browser version that does require action cancellation for drop to work. (hopefully, these are few and far between now) Commented Mar 23, 2016 at 19:25
  • If I interpreted it right, The linked documentation indicates you have to call preventDefault from ondragover or ondragenter to enable a drop...Doesn't really say much about the effect of calling it from within ondrop
    – codecitrus
    Commented Jul 10, 2017 at 19:59
  • 1
    @Cod3Citrus - that's true - it was just an example of making sure you canceled whatever "default" action might actually happen next in case it caused whatever you wanted to happen next to not work...probably applies not so much these days with browser behaviour being a wee bit more standard :) Commented Jul 10, 2017 at 21:22
5

This might be late, but I found a good explanation for your answer.
Yes it is necessary because in the event you're dragging a link, the browser will try to execute that link and not do the drag and drop.

Quote: "In the case of dragging something like a link, we need to prevent the browser's default behavior, which is to navigate to that link. To do this, call e.preventDefault() in the dragover event. Another good practice is to return false in that same handler. Browsers are somewhat inconsistent about needing these, but they don't hurt to add."

Resource: https://web.dev/articles/drag-and-drop

Hope this helps someone like me that questions everything.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.