npm install awe-dnd --save

import VueDND from ‘awe-dnd‘
Vue.use(VueDND)

<div class="color-list">
      <div
          class="color-item"
          v-for="color in colors1" v-dragging="{ item: color, list: colors1, group: ‘color‘ }"
          :key="color.text"
          :style="{background:color.colore}"
      >{{color.text}}</div>
  </div>

return｛
   colors1: [{
            text: "Aquamarine",
            colore:"#00ff00"
        }, {
            text: "Hotpink",
            colore:"#00ffff"
        }, {
            text: "Gold",
            colore:"#ffff00"
        }, {
            text: "Crimson",
            colore:"#c0ff00"
        }, {
            text: "Blueviolet",
            colore:"#0cff00"
        }, {
            text: "Lightblue",
            colore:"#00ffc0"
        }, {
            text: "Cornflowerblue",
            colore:"#00ffd0"
        }, {
            text: "Skyblue",
            colore:"#00ffdd"
        }, {
            text: "Burlywood",
            colore:"#0dffd0"
        }] 
｝

this.animation(this.dataList.begines);
     this.$dragging.$on(‘dragged‘, ({ value }) => {
      console.log(value.item)
      console.log(value.list)
      console.log(value.otherData)
    })

.color-list {
  display: flex;
  // justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.color-item{
  width: 300px;
  height: 200px;
  background-color: #42b983;
  line-height: 200px;
}