Touch-enabled List Sorting – vue-fluid-dnd

Install & Download:

# Yarn
$ yarn add vue-fluid-dnd
# NPM
$ npm install vue-fluid-dnd
# PNPM
$ pnpm add vue-fluid-dnd

Description:

vue-fluid-dnd is a Vue component that provides an easy way to create dynamic, interactive, draggable lists in Vue 3 applications.  With support for both mouse and touch interactions, this component makes reordering list items intuitive on any device.

Lists can be either vertical or horizontal for flexibility. Customization is also available through CSS and component props if you want to tweak the styling and behavior.

How to use it:

1. Import components as follows:

// global
import { createApp } from "vue";
import App from './App.vue';
import { Draggable, Droppable } from 'vue-fluid-dnd';
const app = createApp(App);
app.component('Droppable', Droppable);
app.component('Draggable', Draggable);
app.mount('#app');

// local
import { Draggable, Droppable } from 'vue-fluid-dnd';
export default {
  components: { Draggable, Droppable },
}

2. Define a list which should be sortable.

const myList = ref([
  {
    "draggable-id": "id1",
    number: 1,
    style: "color: black;",
  },
  {
    "draggable-id": "id2",
    number: 2,
    style: "color: red;",
  },
  // more list items here
]);

3. Render the sortable list in your app.

<Droppable droppable-id="droppable-example" direction="vertical" :items="myList">
   <div>
      <Draggable
      v-for="(element, index) in myList"
      v-slot="{ setRef }"
      :draggable-id="element['draggable-example']"
      :index="index"
      >
      <div :ref="setRef" :style="element.style">{{ element.number }}</div>
      </Draggable>
   </div>
</Droppable>

4. Available props for the Draggable component.

draggableId: string;
index: number;

5. Available props for the Droppable component.

droppableId: string;
direction: Direction;
onDrop?: (source: DraggableElement, destination: DraggableElement) => void;
items?: T[];

Preview:

Changelog:

v0.6.5 (04/13/2024)

• Add IsDraggable config

v0.6.4 (04/10/2024)

• Fix bugs

v0.6.3 (04/09/2024)

• Add handlerClass property

v0.6.2 (04/08/2024)

• update

v0.6.1 (04/07/2024)

• Update draggables if items chages

v0.6.0 (03/30/2024)

• The new api is more clear and versatile using vue composable instead of typical components

v0.5.2 (03/28/2024)

• Set styles with javascript instead

v0.5.1 (03/09/2024)

• Remove mitt depency, vue-fluid-dnd is now a dnd library whitout dependencies

v0.4.11 (03/09/2024)

• Set user-select to none on draggable elements