vue-拖拽的使用awe-dnd

拖拽功能的使用

npm install awe-dnd --save

在main.js最后引用这个依赖

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>

在js中创建

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"
        }] 
｝

js中的方法

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

css样式

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