How can I implement drag and drop in Vue.js?

How can I implement drag and drop in Vue.js?

You can use the Vue.Draggable library, which is built on top of Sortable.js. It makes drag-and-drop functionality easy.

Can you show me a basic example?

Sure! First, install the library with npm: npm install vuedraggable. Then, you can use it like this:

<template>
  <draggable v-model="items">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </draggable>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

What if I want to customize the drag handle?

You can specify a handle by adding the handle prop to the draggable component. For example:

<draggable v-model="items" handle=".handle">
  <div v-for="item in items" :key="item.id">
    <span class="handle">:::</span> {{ item.name }}
  </div>
</draggable>

Are there any performance considerations I should be aware of?

Yes, for large lists, consider using the :list prop to manage the items efficiently and avoid unnecessary re-renders.