zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    第五周作业
    关于结对编程的理解
    第四周作业
    总结
    总结
    总结
    总结
    总结
    判断树、判断表
    总结
  • 原文地址:https://www.cnblogs.com/yishifuping/p/15196673.html
Copyright © 2011-2022 走看看