Implementing drag-and-drop lists in Vue can be done through the HTML5 drag-and-drop API or third-party libraries. 1. When using native API, add draggable attributes and dragstart, dragover, drop events to the list items, record indexes in dragstart, block default behavior in dragover, and exchange positions in drop; 2. Combining Vue responsive data, use the splice method to update the array order to trigger view refresh; 3. Optionally use vuedraggable and other libraries to simplify development, and implement drag and drop sorting through v-model binding data, improve efficiency and support complex functions.

It is actually not difficult to implement a drag-and-drop list in Vue. The key is to understand the triggering mechanism of drag-and-drop events and how to combine Vue's responsive features to update data. Below I will divide it into several steps to take you to implement a basic but practical draggable list step by step.

Use HTML5 native drag and drop API to implement basic drag and drop functions

HTML5 provides a native Drag and Drop API, which is ideal for building simple drag and drop interactions. We can control the dragging behavior through draggable attribute and a series of events (such as dragstart , dragover , drop , etc.).

Key points:

• Add draggable="true" to each list item.
• Record the index of the currently dragged item in dragstart event.
• Block default behavior in dragover to allow placement.
• Swap or insert element positions in drop event.

The sample code structure is as follows:

 <template>
  <div>
    <div
      v-for="(item, index) in items"
      :key="item.id"
      draggable="true"
      @dragstart="onDragStart(index)"
      @dragover.prevent
      @drop="onDrop(index)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

Combined with Vue's responsive data update view

The most important step in the drag and drop process is to update the data and have Vue refresh the view automatically. You can use splice() method of the array to move the position of the element.

Example method:

 data() {
  return {
    Items: [
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' }
    ],
    draggedIndex: null
  };
},
methods: {
  onDragStart(index) {
    this.draggedIndex = index;
  },
  onDrop(dropIndex) {
    const movedItem = this.items.splice(this.draggedIndex, 1)[0];
    this.items.splice(dropIndex, 0, movedItem);
    this.draggedIndex = null;
  }
}

This enables automatic update of the array order after dragging and dropping, and Vue will automatically re-render the list.

Optional: Use third-party libraries to simplify development process

If you need more complex drag and drop functions, such as cross-list drag and drop, animation effects, etc., you can consider using some mature Vue drag and drop component libraries, such as:

• SortableJS Vue.Draggable
• Vue Draggable Next

These libraries encapsulate most of the underlying logic and are very convenient to use. For example, use vuedraggable :

 npm install vuedraggable

Then introduce and use it in the component:

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

<script>
import draggable from &#39;vuedraggable&#39;;

export default {
  components: { draggable },
  data() {
    return {
      Items: [
        { id: 1, text: &#39;Item 1&#39; },
        { id: 2, text: &#39;Item 2&#39; },
        { id: 3, text: &#39;Item 3&#39; }
      ]
    };
  }
};
</script>

Basically that's it.
From native APIs to mature component libraries, you can choose the right way based on project complexity. Although the native implementation is a little bit cumbersome, it helps to understand the drag and drop principle; using the library can save time and improve efficiency.

The above is the detailed content of How to build a draggable list in Vue?. For more information, please follow other related articles on the PHP Chinese website!