What is the best way to make a drag and drop builder in 2017? Yes, this question has been asked before but that was 5 years ago and I assume things have changed? HTML5, jQuery UI or is there another option now?

A more recent question Form Builder From Scratch - HTML 5 Drag and Drop, or JQuery UI Draggable, or What? was also left unanswered.

Any help would be great! I have started to play around with both (I have never used HTML5 or jQuery UI's Drag and Drop so it's hard for me to make a decision.) and jQuery UI does seem to be easier to use and understand but also seems quite buggy, well at least in codepen.

What is the best way to make a drag and drop builder in 2017? Yes, this question has been asked before but that was 5 years ago and I assume things have changed? HTML5, jQuery UI or is there another option now?

A more recent question Form Builder From Scratch - HTML 5 Drag and Drop, or JQuery UI Draggable, or What? was also left unanswered.

Any help would be great! I have started to play around with both (I have never used HTML5 or jQuery UI's Drag and Drop so it's hard for me to make a decision.) and jQuery UI does seem to be easier to use and understand but also seems quite buggy, well at least in codepen.

• javascript
• jquery
• html
• jquery-ui
• drag-and-drop

2 Answers 2

We just did a bit of research into Drag and Drop with ReactJs and honestly came out the other side a bit sad. So if you're looking for pure HTML 5 Drag and Drop this is a fantastic site to show you how screwed you are: https://caniuse./#feat=dragndrop

So as of the time of writing this, if you went pure HTML5 DND you really wouldn't cover the mobile scenarios.

Now what isn't listed in this is all the edge cases to get the feature looking the same across browsers. Between Edge, Firefox and Chrome, one adds an Icon to show that you are dragging at item, one has a slight opacity on a copied element and one does something else. Either way, aligning these designs (depending on how annoying your design team is) can be easy (e.g. don't care as long as drag and drop works) to impossible (e.g. get rid of the icon while I'm dragging).

Now when it es to JQuery, it's been around a while but that doesn't mean it doesn't have it's faults as well. Because it runs in the JS layer instead of the browser itself, depending on how much is going on in the system, it can feel a bit slow. Also I did notice it started dragging on annoying situations like when you're trying to swipe the page to scroll in Edge. That could have also been poor programming on our part.

I think in the end we just used React Dnd with the HTML5 backend. Seems to work pretty good and for those mobile scenarios we just have menu options which expose the same functionality in a different form. It ended up helping with accessibility as explaining all the actions for drag and drop via keyboard shortcuts was slightly annoying.

Not sure if that helps but if I recall (and it's been about 6 months) that's the run down.

I remend using jqueryui with a small hack called touch punch that allows you to capture the events of mobile devices such as ontouch on the screen. I prefer jqueryui because it is more plete than HTML5 and relatively easy to use. The link: http://touchpunch.furf.

Good luck and greetings