npm install --save vue-pic-drag-yk
import Vue from 'vue'
import Grid from 'vue-pic-drag-yk'
Vue.use(Grid)data () {
return {
items: [
'a',
'b',
'c'
]
}<grid
:draggable="true"
:sortable="true"
:items="items"
:height="100"
:width="100">
<template slot="cell" scope="props">
<div>{{props.item}}</div>
</template>
</grid>| Name | Type | Default | Description |
|---|---|---|---|
| items | Array | [] | Initial array of items |
| cellWidth | Number | 80 | Cell width |
| cellHeight | Number | 80 | Cell height |
| gridWidth | Number | 800 | your container width |
| draggable | Boolean | false | Flag that will let you drag grid's cells |
| dragDelay | Number | 0 | @TODO |
| sortable | Boolean | false | Flag that will let you reorder grid's cells, requires draggable to be true
|
| center | Boolean | false | @TODO |
| Name | Description |
|---|---|
| @change | Occurs on every action that involves reordering array or changing it's length |
| @remove | Occurs when an element is deleted through template |
| @click | Occurs when cell is clicked |
| @sort | Occurs when array item order is changed manually |
Cell template is used to get access to list data, indexing and sorting params generated by plugin.
Template's scope contains:
props.item - list item value
props.index - initial index of the item
props.sort - current index of an item after sorting
props.remove() - method that will remove item from the arrey and resport list.
Example:
{{props.sort + 1}}