vue-grid-layout

Mobile test

by vi161

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<script src="https://inspired-aria-158313.appspot.com/vue-grid-layout.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<grid-layout
            :layout="layout"
            :col-num="16"
            :row-height="30"
            :is-draggable="false"
            :is-resizable="true"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
        >
        <grid-item class="grid-cell" v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i">
                   <button @click="click">
                   Click
                   </button>
    </grid-item>
    </grid-layout>
</div>

CSS

.vue-grid-layout {
  background: #eee;
}


.vue-grid-item:not(.vue-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}

.vue-grid-item.resizing {
  opacity: 0.9;
}

.vue-grid-item.static {
  background: #cce;
}

.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 24px;
}

.vue-grid-item .minMax {
  font-size: 12px;
}

.vue-grid-item .add {
  cursor: pointer;
}

JavaScript

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

var GridLayout = VueGridLayout.GridLayout;
var GridItem = VueGridLayout.GridItem;
var app = new Vue({
  el: '#app',
  components: {
    GridLayout,
    GridItem,
  },
  data: function() {
    return {
      layout: [{
        "x": 0,
        "y": 0,
        "w": 4,
        "h": 2,
        "i": "0"
      }, {
        "x": 4,
        "y": 0,
        "w": 4,
        "h": 4,
        "i": "1"
      }],
    };
  },
  computed: {},
  ready: function() {
  
  },
  methods: {
  	click: function(){
    	alert('clicked')
    }
  },
});