Advantages of HTML 5 Drag and Drop over jQuery UI Drag and Drop

Question

I'm writing a new web application that needs to support drag and drop operations for elements on the page (not file drag and drop).

This the answer to this question

html5 vs jquery drag and drop

recommends using Modernizr to check whether the browser supports HTML5 drag and drop and either use that support or fall back to an alternative like jQuery UI.

Since they have quite different models, that means that all drag and drop code would have to be implemented and tested separately (very little shared implementation). It only seems logical to do that if there are significant, user-impacting benefits to HTML5 drag and drop and if the fallback to jQuery UI would provide a degraded experience.

Are there significant benefits to implementing both variants?

Answer 1

I would guess that eventually jQuery will take advantage of built-in browser capabilities like html 5 drag and drop.

And if different browsers implement it differently...jQuery will deal with it.

Answer 2

I think the biggest advantage to HTML5 drag and drop over jQuery is the elimination of the sizable jQuery UI library and css files.

That being said, there is the current issue of browser compatibility that makes jQuery very much needed.

Answer 3

Ok, having implemented both, I'd recommend doing it manually with mousedown/mousemove events (basically as jquery UI does it).

I agree that jQuery UI can be a bit heavy, but there are lots of tutorials/code snippets available to code it yourself.

Why do I recommend a manual approach rather then the native implementation in modern browsers? Because html5 DnD sux! It might be new for current browsers, but is modeled after an old implementation back in IE5.

If you are talking about moving things between windows for from the desktop, then maybe I'd consider using html5 DnD as it has browser/OS hooks. Else if you are simply moving DOM nodes on a single webpage, do it manually with js mouse events.

-Paul

Answer 4

I am answering specifically regarding dnd, since that seems to be what you were asking on. I think some people are confusing jQuery with jQueryUI. Using native HTML5 dnd together with jQuery is great combination, both in performance and development time. Since the dnd features came from the IE world the browser support is pretty good across the board (including IE7 for sure, and maybe even older). Using jQuery gives you all the cross browser addClass(), removeClass(), etc. utils that are crucial.

jQueryUI on the other hand offers a ton of features, that you probably will not need. Since their dnd relies on mouse events and not native dnd the performance wont be as good. jQueryUI should not be confused with jQuery. jQueryUI has not received any major updates in over 2.5 years! (Yes, jQueryUI 1.8rc1 was in JAN 2010) So, its not so simple just to say they will add native support in the future, at the pace they have been updating I wouldn't hold my breath.

Answer 5

I just converted one script to use a HTML5-based drag/drop sortable script instead of the jQueryUI one, because with the size of what I was trying to sort, it took 19 seconds to initialise the jQueryUI version, and .19 seconds to initialise the HTML5 version.

So advantage: speed