Menu
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.
296
asked Aug 14 '17 06:08
Complete HTML/CSS Course 2022 Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.
Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port. If the value of this option is set to false, it will prevent the DOM elements to be dragged .
HTML drag-and-drop uses the DOM event model and drag events inherited from mouse events . A typical drag operation begins when a user selects a draggable element, drags the element to a droppable element, and then releases the dragged element.
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.com/#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 comes 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.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
