Raivo Laanemets. Software consultant.

Beware of HTML5 drag-and-drop API

On

HTML5 drag-and-drop API does not work well sometimes and can have hard to debug behavior. Last week I worked on an HTML5 application for optimizing truck load plans. The app represents two sides of the truck and packages that can be dragged into the sides.

At first, I chose to use the drag-and-drop API. I had successfully used it before to re-order uploaded images. The API itself is quite complex and has lots of events to handle. The app ran very well on Chrome on my computer. However, the feedback from the client was not good. The movable part (also called the ghost image, moves together with the mouse) was blurred and unusable on her computers (both running Chrome 52 on Windows). The result can be seen on the screenshot:

HTML5 blurry ghost image

I was not able to replicate the issue on my computers. Chrome 52 on Windows 7 and Windows 8.1, and Chrome 50 on Linux rendered the ghost image a lot better. Googling for the issue revealed nothing. I finally found this article ("The HTML5 drag and drop disaster") which led me to abandon the native API altogether and implement the drag-and-drop functionality by other means.

The alternative implementation uses now a position: fixed element that changes its location with the mousemove event. The code became also a lot cleaner as there were only 2 events to handle: mousemove and click. The new code allows to move elements without having to hold down the left mouse button, reducing strain on hand and improving user experience. The new code also works on Firefox and IE11. A screenshot of the alterative solution (yellow box as the ghost image):

Drag-and-drop alternative solution

I'm still not exactly sure what went wrong in our application with the native API. Anyway, I would use it again only when I need integration with external services (like file uploads) or need to implement drag-and-drop between different windows or tabs. Otherwise the plain DOM and the mousemove event seem to work better.


Comments

No comments have been added so far.

Email is not displayed anywhere.
URLs (max 3) starting with http:// or https:// can be used. Use @Name to mention someone.