Which drag and drop to use? jQuery draggable droppable or HTML5 native drag-and-drop? or maybe other?

1

We are developing a drag and drop CMS called ucraft.me. It is based on EmberJS + Laravel Greensock(GSAP)

Imagine it works the following way:

  • There is a blank page with a left panel, where you have different modules to craft your pages. Ex., title, button, image, slider, video, etc… The white page is based on a grid where there can be max 4 modules.

  • Now imagine we have a module - button, in the centre of a full width row(span12) and now we decided to drop another module, like Title, which will split the current row into span6 - span6. Currently we are using jQuery draggable droppable, to calculate all the droppable areas and to let the user drop certain elements.

Can someone recommend a better drag and drop library to implement this, is there anyone with a similar experience? Do you think jQuery draggable-droppable is a good choice to implement the drag and drop feature in the site builder? Does it have good performance?

Or should we use HTML5 native drag-and-drop library with ember drag and drop addon?

Thanks!!

2

I’ve used this in a few projects and it worked well.

http://farhadi.ir/projects/html5sortable/

3

So far I’ve used Pep and Dragula dragula was better for my uses but is less flexible. I would caution the use of HTML5 drag and drop as browser support is not complete. It may make sense to stay with jQuery.