# # Events

Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized. Moved and resized event listeners can be added, if the only notification needed is when an item is finished moving or resizing.

Working example here

        <grid-layout
                :layout="layout"
                :col-num="12"
                :row-height="30"
                :is-draggable="true"
                :is-resizable="true"
                :vertical-compact="true"
                :margin="[10, 10]"
                :use-css-transforms="true"
                @layout-created="layoutCreatedEvent"
                @layout-before-mount="layoutBeforeMountEvent"
                @layout-mounted="layoutMountedEvent"
                @layout-ready="layoutReadyEvent"
                @layout-updated="layoutUpdatedEvent"
                @breakpoint-changed="breakpointChangedEvent"
        >

            <grid-item v-for="item in layout"
                       :x="item.x"
                       :y="item.y"
                       :w="item.w"
                       :h="item.h"
                       :i="item.i"
                       :key="item.i"
                       @resize="resizeEvent"
                       @move="moveEvent"
                       @resized="resizedEvent"
                       @container-resized="containerResizedEvent"
                       @moved="movedEvent">
                {{item.i}}
            </grid-item>
        </grid-layout>

## # GridLayout

- layoutCreatedEvent

  Layout created event

  Emited on the component created lifecycle hook

        layoutCreatedEvent: function(newLayout){
          console.log("Created layout: ", newLayout)
        }

- layoutBeforeMountEvent

  Layout beforeMount event

  Emited on the component beforeMount lifecycle hook

        layoutBeforeMountEvent: function(newLayout){
          console.log("beforeMount layout: ", newLayout)
        }

- layoutMountedEvent

  Layout mounted event

  Emited on the component mounted lifecycle hook

        layoutMountedEvent: function(newLayout){
          console.log("Mounted layout: ", newLayout)
        }

- layoutReadyEvent

  Layout ready event

  Emited when all the operations on the mount hook finish

        layoutReadyEvent: function(newLayout){
          console.log("Ready layout: ", newLayout)
        }

- layoutUpdatedEvent

  Layout updated event

  Every time the layout has finished updating and positions of all grid-items are recalculated

        layoutUpdatedEvent: function(newLayout){
          console.log("Updated layout: ", newLayout)
        }

- breakpointChangedEvent

  Breakpoint Changed event

  Every time the breakpoint value changes due to window resize

        /**
         *
         * @param newBreakpoint the breakpoint name
         * @param newLayout the chosen layout for the breakpoint
         *
         */
        breakpointChangedEvent: function(newBreakpoint, newLayout){
            console.log("BREAKPOINT CHANGED breakpoint=", newBreakpoint, ", layout: ", newLayout );
        },

## # GridItem

- moveEvent

  Move event

  Every time an item is being moved and changes position

        moveEvent: function(i, newX, newY){
            console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
        },

- resizeEvent

  Resize event

  Every time an item is being resized and changes size

        resizeEvent: function(i, newH, newW, newHPx, newWPx){
            console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
        },

- movedEvent

  Moved event

  Every time an item is finished being moved and changes position

        movedEvent: function(i, newX, newY){
            console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
        },

- resizedEvent

  Resized event

  Every time an item is finished being resized and changes size

        /**
         *
         * @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){
            console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
        },

- containerResizedEvent

  Container Resized event

  Every time the grid item/layout container changes size (browser window or other)

        /**
         *
         * @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
         *
         */
        containerResizedEvent: function(i, newH, newW, newHPx, newWPx){
            console.log("CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
        },