IE and setting HTML Global Attribute draggable to true results in weird behavior

I recently had to make a popup dialog box draggable or movable so that the user can read the text underneath it. I found the HTML Global Attribute draggable and set it to true. As the MDN page suggests, it does not quite work at least in the browsers I tested. I ended up adding an Angular Directive for draggable behavior as detailed on Angular Docs page. A working version of this directive can be seen on Plunker. Couple of things to be aware of if you are using somewhat similar approach: 1) I happened to have an input form in this dialog box and I could not enter text into any of the input fields. This is because of the event.preventDefault() line in the element.on event. Comment this line if you are making a draggable/movable input form. 2) Even though I was able to get the drag/move behavior for my dialog, I left the draggable="true" in there thinking it could not possibly hurt. Turns out that it is causing a weird behavior in IE. When I click on an input text box to enter text, I was not getting the input cursor and I had to double-click on it. Also when I double-click, it puts the focus at the beginning of text instead of where I double-clicked. Once I remove the draggable attribute, everything is working as expected. I spent quite a bit of time trying to figure what caused this weird behavior and hopefully this tip would help others find a solution quicker. Happy Coding! Sonny