zoukankan      html  css  js  c++  java
  • vue列表拖拽组件 vue-dragging

    安装

    $ npm install awe-dnd --save
    

    应用 

    在main.js中,通过Vue.use导入插件
    import VueDND from 'awe-dnd'
    
    Vue.use(VueDND)

    vue文件中引用

    <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="color.text"
          >{{color.text}}</div>
      </div>
    </template> 

    vue2.0的使用

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

    vue1.0的使用

    <div class="color-list">
        <div 
            class="color-item" 
            v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', key: color.text }"
            track-by="text"
        >{{color.text}}</div>
    </div>
    
    添加事件
    <div class="color-list">
        <div 
            class="color-item" 
            v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
            :key="color.text"
        >{{color.text}}</div>
    </div>
    
    export default {
      mounted () {
        this.$dragging.$on('dragged', ({ value }) => {
          console.log(value.item)
          console.log(value.list)
          console.log(value.otherData)
        })
        this.$dragging.$on('dragend', () => {
            
        })
      }
    }
    

      

  • 相关阅读:
    Extension Methods (C# Programming Guide)
    ArraySegment
    git config
    0.0.0.0 IPAddress.Any 【】127.0.0.1 IPAddress.Loopback 【】localhost
    public static float CompareExchange(ref float location1,float value,float comparand)
    ConcurrentDictionary中的 TryRemove
    enum类型
    Array.Copy vs Buffer.BlockCopy
    伴随待字闺中的生命周期分析
    Twitter实时搜索系统EarlyBird
  • 原文地址:https://www.cnblogs.com/woshidouzia/p/9304813.html
Copyright © 2011-2022 走看看