vue2 drag sorting implementation of vuedraggable component

1. Install plug-ins

npm install -D vuedraggable

2. Introduce components in the interface that needs to be sorted

<script>
import draggable from 'vuedraggable'
export default {
 name: 'HelloWorld',
 components: {
  draggable
 },

3. Use in templates

<draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move">
  <div v-for="(item, index) in groups" :key=index>
   item {{item}}
  </div>
</draggable>

4. Implement the change, start, end, and move methods. The data bound by v-model is the sorted data, which can be passed to the background to modify the database data.

methods: {
  change (event) {
   ('change', event)
  },
  start (event) {
   ('start', event)
  },
  end (event) {
   ('end', event, )
  },
  move (event, orgin) {
   ('move', event, orgin)
  }
}

5. Complete code, reference URL

&lt;template&gt;
 &lt;div&gt;
  Sort
  &lt;draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move"&gt;
   &lt;!-- &lt;transition-group&gt; --&gt;
    &lt;div v-for="(item, index) in groups" :key=index&gt;
     item {{item}}
    &lt;/div&gt;
   &lt;!-- &lt;/transition-group&gt; --&gt;
  &lt;/draggable&gt;
 &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import draggable from 'vuedraggable'
export default {
 name: 'HelloWorld',
 components: {
  draggable
 },
 data () {
  return {
   groups: [
    1, 2, 3, 4, 5
   ]
  }
 },
 methods: {
  change (event) {
   ('change', event)
  },
  start (event) {
   ('start', event)
  },
  end (event) {
   ('end', event, )
  },
  move (event, orgin) {
   ('move', event, orgin)
  }
 }
}
&lt;/script&gt;

&lt;style scoped&gt;

&lt;/style&gt;

/SortableJS/

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.