vue-grid-layout
Version:
A draggable and resizable grid layout, as a Vue component.
104 lines (97 loc) • 3.76 kB
JavaScript
var testLayout = [
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
{"x":6,"y":4,"w":2,"h":4,"i":"9"},
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
];
new Vue({
el: '#app',
data: {
layout: testLayout,
index: 0,
eventLog: []
},
watch: {
eventLog: function() {
var eventsDiv = this.$refs.eventsDiv;
eventsDiv.scrollTop = eventsDiv.scrollHeight;
}
},
methods: {
moveEvent: function(i, newX, newY){
var msg = "MOVE i=" + i + ", X=" + newX + ", Y=" + newY;
this.eventLog.push(msg);
console.log(msg);
},
movedEvent: function(i, newX, newY){
var msg = "MOVED i=" + i + ", X=" + newX + ", Y=" + newY;
this.eventLog.push(msg);
console.log(msg);
},
resizeEvent: function(i, newH, newW, newHPx, newWPx){
var msg = "RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx;
this.eventLog.push(msg);
console.log(msg);
},
resizedEvent: function(i, newX, newY, newHPx, newWPx){
var msg = "RESIZED i=" + i + ", X=" + newX + ", Y=" + newY + ", H(px)=" + newHPx + ", W(px)=" + newWPx;
this.eventLog.push(msg);
console.log(msg);
},
containerResizedEvent: function(i, newH, newW, newHPx, newWPx){
var msg = "CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx;
this.eventLog.push(msg);
console.log(msg);
},
/**
*
* @param i the item id/index
* @param newH new height in grid rows
* @param newW new width in grid columns
* @param newHPx new height in pixels
* @param newWPx new width in pixels
*
*/
resizedEvent: function(i, newH, newW, newHPx, newWPx){
var msg = "RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx;
this.eventLog.push(msg);
console.log(msg);
},
layoutCreatedEvent: function(newLayout){
this.eventLog.push("Created layout");
console.log("Created layout: ", newLayout)
},
layoutBeforeMountEvent: function(newLayout){
this.eventLog.push("beforeMount layout");
console.log("beforeMount layout: ", newLayout)
},
layoutMountedEvent: function(newLayout){
this.eventLog.push("Mounted layout");
console.log("Mounted layout: ", newLayout)
},
layoutReadyEvent: function(newLayout){
this.eventLog.push("Ready layout");
console.log("Ready layout: ", newLayout)
},
layoutUpdatedEvent: function(newLayout){
this.eventLog.push("Updated layout");
console.log("Updated layout: ", newLayout)
},
}
});