一個輕量的 Vue 拖動排序插件

soap72twsite 8年前發布 | 68K 次閱讀 Vue.js Vue.js開發

Awe-dnd

Makes your elements draggable in Vue.

See Demo: http://hilongjw.github.io/vue-dragging/

Some of goals of this project worth noting include:

  • support desktop and mobile
  • Vue data-driven philosophy
  • Supports both of Vue 1.0 and Vue 2.0

Requirements

  • Vue: ^1.0.0 or ^2.0.0

Install

From npm:

$ npm install awe-dnd --save

Usage

//main.js


import VueDND from 'awe-dnd'


Vue.use(VueDND)</code></pre> 
  
<!--your.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></code></pre> 
  
API
 
  
v-dragging=&quot;{ item: color, list: colors, group: 'color' }&quot;
 
  
Arguments:
 
  
     
   
  • {item} Object
    •  
   
  • {list} Array
    •  
   
  •  
    {group} String
     
    group is unique key of dragable list.
     
    •  
  
 
  
Example
 
  
<!-- 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' }"
        track-by="color.text"
    >{{color.text}}</div>
</div></code></pre> 
  
 
 
  
 
 本文由用戶 soap72twsite 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！