vue-pic-drag-yk

Vue.js Grid ( Experiment )

Install

npm install --save vue-pic-drag-yk

import Vue from 'vue'
import Grid from 'vue-pic-drag-yk'
Vue.use(Grid)

Usage

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>

Props

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

Events

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

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:

.liimg { cursor: pointer; width: 120px; height:120px; background: #fff; position: relative; border:1px solid rgba(120, 130, 140, 0.3); img { width:60px; height:60px; float: left; border-radius:50%; margin-left: 30px; margin-top:10px; } span { width:120px; text-align: center; line-height: 20px; // margin-left: 50px; margin-top: 72px; display: block; font-size:12px; } p { font-size:12px; text-align: center; } .ab{ position: absolute; left:0; top:0; bottom:0; right: 0; cursor: pointer; } .sortnum { position: absolute; left:10px; top:10px; } }