Draggable

Draggable is a component to create a list of sliding elements. Uses vue-draggable-next, which is the port to Sortable. This component is used in such components as Dock.

The implementation has events from vue-draggable-next. Only three are listed below.

Events

add

Adding an element

remove

Removal of the element

update

Update element

Examples

Basic example

Robert

Cristiano

Leo

<draggable class="w-full">
  <div
    v-for="(el, id) in players"
    :key="id"
    class="list-group-item m-1 block w-full cursor-move rounded-md bg-secondary-200 dark:bg-secondary-8 p-3 text-center"
  >
    {{ el }}
  </div>
</draggable>