Drag and Drop

Since the widespread rise of graphical user interfaces (GUIs), drag-and-drop functionality has been a core element. Modern file browsers such as Explorer wouldn't work without it. Arranging images in a photo album app works similarly, and touch-enabled devices use drag and drop for many tasks too. On the web, however, it isn't as widespread.

The lack of drag and drop on the web is partly because a native drag-and-drop API wasn't around until at least 2016. Another main reason is that we must perform lots of tasks to implement reliable drag and drop with the exact desired behavior. Luckily, with vuedraggable, there is a library that lets us add the drag-and-drop functionality with a single component.

Installation and usage

To install vuedraggable, we execute npm i -s vuedraggable@next for Vue 3. Once installed, the library offers a single component called <draggable>. This component exposes a slot item with which we can steer the DOM of a single item into the draggable list. A typical setup for a drag-and-drop sorter would, for example, look like the component illustrated below: