Detailed explanation of the order of the list by dragging and dropping

When we build front-end applications, we sometimes need to implement some highly interactive functions, such as dragging and dropping to change the order of the list. In this article, I will demonstrate how to implement such a feature using .

First, we need a basic Vue component structure, including HTML templates, JavaScript logic, and CSS styles. We will implement the function of dragging and changing the order of lists in the Vue component.

<template>
  <div ref="list" 
    :ondragstart="dragstart"
    :ondragenter="dragenter"
    :ondragend="dragend"
    class="list">
    <div draggable="true" class="item" v-for="i in 10">{{ i }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// The dragged parent elementconst list = ref(null)
// The element currently being draggedconst sourceNode = ref(null)

// Drag and drop start eventconst dragstart = (e) => {
  setTimeout(() => {
    // Asynchronously, otherwise the element will disappear directly     = 
    ('moving')
  }, 0)
}

const dragenter = (e) => {
  // Block the default behavior of the browser, otherwise it will return to its original position when you let go  ()
  if( ===  ||  === ) {
    // If it is on the parent element or on its own element, no processing is done    return;
  }
  const children = [... ]
  const sourceIndex = ()
  const targetIndex = ()
  // Insert to the corresponding position  if(sourceIndex < targetIndex) {
    (, )
  }else {
    (, )    
  }
}

const dragend = (e) => {
  ('moving')
}
</script>

<style scoped>
.box {
  height: 80vw;
}
.item {
  height: 40px;
  background-color: antiquewhite;
  margin: 10px;
  cursor: pointer;
}

. {
  background: #ccc;
  color: transparent;
  border: 1px dashed #ccc;
}
</style>

The above is the complete code. Now let's explain step by step how this code works.

• <template>Partially contains our HTML structure. We have a container that contains some drag-able elements, each with a drag event.
• <script setup>Part is a new feature of 3, used to write the logic of components. Here we introducerefFunctions used to create responsive data. We create two refs, one for tracking the dragged parent element and the other for tracking the currently dragged element. Then we define three functions, which handle the drag start, drag entry and drag end events respectively.
• existdragstartIn the function, we set an asynchronous timer to ensure that the correct dragged element is obtained. Then we add a dragged element to the dragged elementmovingClass, used to change its style when dragging.
• dragenterFunction handles drag and drop into events. We first block the browser's default behavior, and then determine whether the currently dragged target element is the list container itself or the drag element itself. If so, no processing will be performed. Next, we take all the child elements in the list container and calculate the indexes of the dragged elements and the target elements, and then insert the dragged elements into the correct position based on these indexes.
• dragendThe function removes the dragged element at the end of the draggingmovingclass, restore its original style.
• at last,<style scoped>The section contains the CSS style of the component, including the style definitions of the list container and drag elements.

This is the end of this article about the detailed explanation of Vue's implementation of drag and drop to change the order of lists. For more related content on drag and drop to change the order of lists, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!