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

27
votes

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?

5
htmldrag-and-dropjquery-ui-draggable
Why the close vote? It seems reasonable to know if there are benefits to HTML5 drag & drop that I'm not aware of that would warrant providing dual implementations. If it's not a valid question, please share why. – Eric J.
Eric: To me it's not clear what kind of answer you're after. It's one of those "What are the pros and cons" or "What should I use for my project" questions. You know that HTML5 drag and drop isn't cross browser, you know how to fall back to js implementation - what is the technical question here? I admit, I may be missing it. – Wesley Murch
@Madmartigan: No, I'm asking if there's something that HTML5 drag and drop does better than jQuery UI drag and drop. I know I have to implement the jQuery version because not all browsers support HTML5. I'm after whether there are benefits (faster, smoother, whatever) to the HTML5 version that I'm not aware of that would warrant additional development effort on top of development for jQuery UI. The answers I have seen around the net seem to be "do both", and that does not make sense to me given what I currently know. – Eric J.

5 Answers

12
votes

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.

12
votes

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.

8
votes

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

3
votes

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.

0
votes

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