implements jbaysolutions#21, moved and resized events

Author: gmsa

README.md

@@ -129,6 +129,8 @@ or include the script in your html (download from [releases](https://github.com/
 ### 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](https://jbaysolutions.github.io/vue-grid-layout/examples/02-events.html)   
 
 ````html
@@ -151,7 +153,9 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
                    :h="item.h"
                    :i="item.i"
                    @resize="resizeEvent"
-                   @move="moveEvent">
+                   @move="moveEvent"
+                   @resized="resizedEvent"
+                   @moved="movedEvent">
             {{item.i}}
         </grid-item>
     </grid-layout>
@@ -173,6 +177,22 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
     },
 ``` 
 
+* Moved event: every time an item is finished being moved and changes position
+
+```javascript
+    movedEvent: function(i, newX, newY){
+        console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
+    },
+```
+
+* Resized event: every time an item is finished being resized and changes size
+ 
+```javascript
+    resizedEvent: function(i, newH, newW){
+        console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW);
+    },
+``` 
+
 
 ## Contribute
 

dist/vue-grid-layout.js

@@ -50,7 +50,10 @@ <h1>Vue Grid Layout Example 2 - Move and resize events</h1>
                            :h="item.h"
                            :i="item.i"
                            @resize="resizeEvent"
-                           @move="moveEvent">
+                           @move="moveEvent"
+                           @resized="resizedEvent"
+                           @moved="movedEvent"
+                >
                     <span class="text">{{item.i}}</span>
                 </grid-item>
             </grid-layout>

dist/vue-grid-layout.min.js

@@ -58,6 +58,17 @@ new Vue({
             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);
+
+        },
+        resizedEvent: function(i, newH, newW){
+            var msg = "RESIZED i=" + i + ", H=" + newH + ", W=" + newW;
+            this.eventLog.push(msg);
+            console.log(msg);
+        },
     }
 });
 

dist/vue-grid-layout.min.js.map

@@ -39,7 +39,10 @@
                            :min-h="2"
                            :i="item.i"
                            @resize="resize"
-                           @move="move">
+                           @move="move"
+                           @resized="resized"
+                           @moved="moved"
+                >
                     <test-element :text="item.i"></test-element>
                 </grid-item>
             </grid-layout>
@@ -126,6 +129,12 @@
             resize: function(i, newH, newW){
                 console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
             },         
+            moved: function(i, newX, newY){
+                console.log("### MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
+            },
+            resized: function(i, newH, newW){
+                console.log("### RESIZED i=" + i + ", H=" + newH + ", W=" + newW);
+            },
             /**
              * Add change direction button
              */

examples/02-events.html

@@ -180,7 +180,12 @@
                 rtl: false,
 
                 dragEventSet: false,
-                resizeEventSet: false
+                resizeEventSet: false,
+
+                previousW: null,
+                previousH: null,
+                previousX: null,
+                previousY: null,
             }
         },
         created () {
@@ -353,6 +358,8 @@
                 const newSize = {width: 0, height: 0};
                 switch (event.type) {
                     case "resizestart":
+                        this.previousW = this.w;
+                        this.previousH = this.h;
                         var pos = this.calcPosition(this.x, this.y, this.w, this.h);
                         newSize.width = pos.width;
                         newSize.height = pos.height;
@@ -411,6 +418,9 @@
                 if (this.w !== pos.w || this.h !== pos.h) {
                     this.$emit("resize", this.i, pos.h, pos.w);
                 }
+                if (event.type === "resizeend" && (this.previousW !== this.w || this.previousH !== this.h)) {
+                    this.$emit("resized", this.i, pos.h, pos.w);
+                }
                 eventBus.$emit("resizeEvent", event.type, this.i, this.x, this.y, pos.h, pos.w);
             },
             handleDrag(event) {
@@ -426,6 +436,9 @@
                 const newPosition = {top: 0, left: 0};
                 switch (event.type) {
                     case "dragstart":
+                        this.previousX = this.x;
+                        this.previousY = this.y;
+
                         var parentRect = event.target.offsetParent.getBoundingClientRect();
                         var clientRect = event.target.getBoundingClientRect();
                         if (this.rtl) {
@@ -483,6 +496,9 @@
                 if (this.x !== pos.x || this.y !== pos.y) {
                     this.$emit("move", this.i, pos.x, pos.y);
                 }
+                if (event.type === "dragend" && (this.previousX !== this.x || this.previousY !== this.y)) {
+                    this.$emit("moved", this.i, pos.x, pos.y);
+                }
                 eventBus.$emit("dragEvent", event.type, this.i, pos.x, pos.y, this.h, this.w);
             },
             calcPosition: function(x, y, w, h) {