Some headings here

While this seems to be quite overwhelming and if we were to implement this from scratch it could take ages to do, we now at least know what we need and perhaps find a good library that could handle many if not most of the features mention above. After looking at several DnD (drag and drop) libraries we will highlight a few of them and list the benefits and downsides for each of them.

VueUse
VueUse is a wonderful collection of utilities and composable functions including composables such as useDraggable and useResizeObserver however for our particular use case these utilities would be quite low level and we will need to connect many dots and take care of things such as making the widgets aware of each other, handle swap zones and many other details which will take quite a lot of time.
SortableJS or Shopify Draggable
SortableJS is a great general purpose drag and drop library which handles a good chunk of the features we need. We've covered an integration with Vue.js and SortableJS in a past article. SortableJS works very well for lists, tables, kanban boards, multiple selections with drag and drop and other features where the drag and drop is the fundamental thing you need. It handles swap zones, collisions and other features related to drag and drop. However, one really important thing for us is the ability to resize widgets and while we do that, the whole layout should re-adjust as we resize. With both SortableJs and Shopify Draggable we would have to implement that manually.
Gridstack.js
Gridstack.js is more of a high level library specifically designed for creating interactive drag and drop layouts. Although the website looks rather old and it mentions jquery in it, it handles pretty much everything we need and is very well maintained having regular releases from 2014 for more than 8 years! This is quite an amazing feat, especially in open source.

Browser not supported

Latest articles

Stay on top of news on working and training abroad