vue-drag-reorder
v1.0.3
Published
A vue plugin of directive to make html elements dragable and to reorder items
Downloads
175
Readme
vue-drag-reorder
demo
demo using rawgit.com
Usage
Install
npm install vue-drag-reorder
Install in Vue
var drapPlugin = require('vue-drag-reorder')
drapPlugin.install(Vue)
HTML
Use this is as easy as follows:
ul
<ul v-droper="list">
<li v-dragable v-for="item in list">{{item}}</li>
</ul>
table
<table>
<thead></thead>
<tbody v-droper="list" drag-class="droper">
<tr v-dragable v-for="(index,item) in list">
<td>
{{index}}
</td>
<td>
{{item}}
</td>
</tr>
</tbody>
</table>
Draging style
We use these .yita-draging
.yita-draging-zone
two class name If not specified.
.yita-draging {
background-color: grey
}
.yita-draging-zone {
background-color: orange
}
Use another class name (Optional)
If you not want to use these stupid default className, you can specify one to html.
<ul v-droper="list" drag-class="droper">
<li v-dragable drag-class="draging" v-for="item in list">{{item}}</li>
</ul>