How to implement list sorting and drag sorting in Vue?

With the continuous development of front-end development technology, more and more websites and applications need to implement drag-and-drop sorting functions on the interface. In the Vue framework, we can use some libraries or components to easily implement list sorting and drag sorting functions.

1. Use sortable.js to implement list sorting

sortable.js is an independent library that can support the drag-and-drop sorting function of the list. In Vue.js, we use sortable.js to implement the sorting function of the list.

First, we need to install sortable.js in the project. You can use the npm command to install:

npm install sortablejs --save

Then introduce sortable.js in the component:

import Sortable from 'sortablejs'

Then in the component In the mounted hook function, use sortable.js to initialize the list, as shown below:

mounted() {
  let el = this.$refs.list
  this.sortable = Sortable.create(el, {
    onEnd: this.onEnd
  })
},
methods: {
  onEnd: function (evt) {
    // 拖动后的排序操作
  }
}

Among them, onEnd is the callback function when a list item is dragged and dropped. In this function, we can sequence the list Reorder, or store the rearranged list sequence to the database or server.

2. Use vue-draggable to implement drag sorting

vue-draggable is a draggable sorting list component based on Vue.js, which can easily implement the drag-and-drop sorting function of the list . Use vue-draggable to implement interactive lists in Vue.js applications, such as dragging table rows, changing tile size and position, etc.

To install vue-draggable you can use the npm command:

npm install vuedraggable --save

Then use the vue-draggable component in the component as follows:

<template>
  <draggable v-model="list" :element="'ul'">
    <li v-for="item in list" :key="item.id">
      {{ item.id }}. {{ item.text }}
    </li>
  </draggable>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    components: { draggable },
    data() {
      return {
        list: [
          { id: 1, text: 'Vue.js' },
          { id: 2, text: 'React.js' },
          { id: 3, text: 'Angular.js' },
          { id: 4, text: 'Ember.js' },
          { id: 5, text: 'Backbone.js' },
          { id: 6, text: 'Knockout.js' }
        ]
      }
    }
  }
</script>

In the above code, we The list is encapsulated using the vue-draggable component, and the v-model directive is used to bind the component's list data, so that the order of the list can be changed by dragging.

3. Use Vue Sortable to implement drag sorting

Vue Sortable is a component of Vue.js, which allows us to easily implement a highly customizable list drag and drop sorting function. Vue Sortable does not require configuration. You only need to use simple Vue.js template syntax to implement drag-and-drop sorting lists.

Installing Vue Sortable can also use the npm command:

npm install vue-sortable --save

Then use the Vue Sortable component in the component as follows:

<template>
  <div>
    <ul v-sortable="{data: list, onUpdate: onUpdate}">
      <li v-for="item in list" :key="item.id">
        {{ item.id }}. {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
  import VueSortable from 'vue-sortable'

  export default {
    components: { VueSortable },
    data() {
      return {
        list: [
          { id: 1, text: 'Vue.js' },
          { id: 2, text: 'React.js' },
          { id: 3, text: 'Angular.js' },
          { id: 4, text: 'Ember.js' },
          { id: 5, text: 'Backbone.js' },
          { id: 6, text: 'Knockout.js' }
        ]
      }
    },
    methods: {
      onUpdate: function (event) {
        // 拖动后的排序操作
      }
    }
  }
</script>

In the above code, we use The vue-sortable directive is used to set the list to be sortable, and the onUpdate callback function is used to update the list after drag-and-drop sorting is completed.

Through the above three methods, we can easily implement the list sorting and drag sorting functions in Vue, thus making our application more interactive and easier to use.

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