Prevent drag & drop (it's dropping anywhere)

Question

I'm using this AngularJS Drag & Drop library and the documentation is confusing and it's quite out of date, but the effect is that it seems like even if there's nowhere to drop it it always drops.

Answer 1

One thing I didn't understand initially is that event.preventDefault() inside ondragover is the way to allow drop (it's kind of backwards from what you might expect). Hence me searching phrases like "how to prevent drag & drop".

Anyway, the problem was Aha, it's an issue with the library, which seems to have some lines of code to handle some old situation which no longer happens. So technically it's not actually dropping at all, but it is calling the onDropSuccess function no matter what.

This issue onDropSuccess will always trigger in IE and Firefox on Windows summarizes the issue, and the fix I've used is to remove these lines from function determineEffectAllowed (e):

if (e.dataTransfer && e.dataTransfer.dropEffect === 'none') {
  if (e.dataTransfer.effectAllowed === 'copy' ||
    e.dataTransfer.effectAllowed === 'move') {
    e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed
  } else if (e.dataTransfer.effectAllowed === 'copyMove' || e.dataTransfer.effectAllowed === 'copymove') {
    e.dataTransfer.dropEffect = e.ctrlKey ? 'copy' : 'move'
  }
}

So it'll just look like this:

function determineEffectAllowed (e) {
  if (e.originalEvent) {
    e.dataTransfer = e.originalEvent.dataTransfer
  }
}