2

I've been trying to avoid importing jQuery and jQuery UI for just one feature, so I'm working on a custom set of drag and drop directives for an application I'm developing. Everything works as predicted in Chrome, Firefox, Opera and Safari, but in both IE 9 and 11 (I haven't tested on 10, but I assume it's the same), the dragover and drop events don't fire. dragstart, dragend, dragenter, and dragleave fire, although adding the 'over' class doesn't seem to have any effect -- the class appears in classlist, but the browser seems to ignore it. I'm including a pastebin with the directives. If anyone has any ideas, I'd appreciate hearing them.

http://pastebin.com/xbC1vPTr

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
dlwiest
  • 615
  • 2
  • 8
  • 22
  • http://stackoverflow.com/questions/14903542/jquery-ui-1-9-1-ui-draggable-not-working-with-ie9-and-ie10 – Reactgular Feb 16 '15 at 17:46
  • Don't know if it's relevant, but http://caniuse.com/#search=drag shows partial support on IE for drag and drop. It says: "In IE9-10 draggable attribute could be effectively applied for link and image elements. For div and span elements you should call 'element.dragDrop()' to start drag event." – Nicholas Daley-Okoye Feb 16 '15 at 17:57
  • That's a different issue. I just need to support IE11 for now. – dlwiest Feb 16 '15 at 19:48

1 Answers1

4

Adding a min-height property to the droppable element solved the problem, at least in IE11. If someone could offer an explanation as to why, I'll mark your solution as accepted. In the meantime, I'll leave this here in case anyone else is having the same problem.

dlwiest
  • 615
  • 2
  • 8
  • 22
  • 1
    I've been also struggling with the same AngularJS drag/drop directive in IE 9 and 11. I found that `this.classList.add('drag');` and `this.classList.remove('drag');` are not supported in IE 9 and 11. Removing both lines stopped the scripting errors and allowed me to drag and drop in IE. – bob.mazzo Jun 02 '15 at 18:30
  • In my case I have a series of nested UL elements and the dragover/drop events were always triggering on the UL underneath the top one (but only in IE). Glad I came across this - for some reason adding a min-height to the UL elements also fixed the problem for me. Thanks. – Jason Oct 19 '16 at 10:37