vue can be used to drag the sort component example

introduce

vue-dragging A vue plug-in that can be sorted at will. Supports desktop and mobile terminals, and the drag and drop transition animation is beautiful. Supports vue1 and vue2 versions. Very practical.

Install

Installation via NPM

$ npm install awe-dnd --save

Plugin application

In, import the plugin

import VueDND from 'awe-dnd'
(VueDND)

Reference this in your vue file

<script>
export default {
  data () {
    return {
        colors: [{
            text: "Aquamarine"
        }, {
            text: "Hotpink"
        }, {
            text: "Gold"
        }, {
            text: "Crimson"
        }, {
            text: "Blueviolet"
        }, {
            text: "Lightblue"
        }, {
            text: "Cornflowerblue"
        }, {
            text: "Skyblue"
        }, {
            text: "Burlywood"
        }]
    }
  }
}
</script>
<template>
  <div class="color-list">
      <div 
          class="color-item" 
          v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
          :key=""
      >{{}}</div>
  </div>
</template>

How to use vue2.0

<div class="color-list">
    <div 
        class="color-item" 
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
        :key=""
    >{{}}</div>
</div>

How to use vue1.0

<div class="color-list">
    <div 
        class="color-item" 
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', key:  }"
        track-by="text"
    >{{}}</div>
</div>

Add Event

<div class="color-list">
    <div 
        class="color-item" 
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
        :key=""
    >{{}}</div>
</div>

export default {
  mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      ()
      ()
      ()
    })
    this.$dragging.$on('dragend', () => {
    })
  }
}

The above is the detailed content of the examples of Vue that can be used to drag the sorting component. For more information about Vue drag the sorting component, please follow my other related articles!