Fixed jbaysolutions#61 and jbaysolutions#37, Fixed jbaysolutions#82

gmsa · gmsa · commit 5e3ba1fe1450 · 2017-08-17T12:06:09.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 2.1.8 (Aug 17, 2017)
+
+* Fixed #61 and #37
+* Fixed #82
+
 ## 2.1.7 (Aug 17, 2017)
 
 * Fixed #59
diff --git a/dist/vue-grid-layout.js b/dist/vue-grid-layout.js
diff --git a/dist/vue-grid-layout.min.js b/dist/vue-grid-layout.min.js
diff --git a/dist/vue-grid-layout.min.js.map b/dist/vue-grid-layout.min.js.map
diff --git a/examples/01-basic.html b/examples/01-basic.html
@@ -54,7 +54,7 @@ <h1>Vue Grid Layout Example 1 - Basic</h1>
 
     </div>
     <script src="vue.min.js"></script>
-    <script src="../dist/vue-grid-layout.js"></script>
+    <script src="../dist/vue-grid-layout.min.js"></script>
     <script src="01-basic.js"></script>
 </body>
 </html>
diff --git a/examples/02-events.html b/examples/02-events.html
@@ -64,7 +64,7 @@ <h1>Vue Grid Layout Example 2 - Move and resize events</h1>
 
     </div>
     <script src="vue.min.js"></script>
-    <script src="../dist/vue-grid-layout.js"></script>
+    <script src="../dist/vue-grid-layout.min.js"></script>
     <script src="02-events.js"></script>
 </body>
 </html>
diff --git a/examples/03-multiple-grids.html b/examples/03-multiple-grids.html
@@ -81,7 +81,7 @@ <h3>Grid 2</h3>
 </div>
 
 <script src="vue.min.js"></script>
-<script src="../dist/vue-grid-layout.js"></script>
+<script src="../dist/vue-grid-layout.min.js"></script>
 <script type="text/javascript">
     Vue.config.debug = true;
     Vue.config.devtools = true;
diff --git a/examples/04-allow-ignore.html b/examples/04-allow-ignore.html
@@ -64,7 +64,7 @@ <h1>Vue Grid Layout Example 4 - Drag allow/ignore elements</h1>
 </div>
 
 <script src="vue.min.js"></script>
-<script src="../dist/vue-grid-layout.js"></script>
+<script src="../dist/vue-grid-layout.min.js"></script>
 <script type="text/javascript">
     Vue.config.debug = true;
     Vue.config.devtools = true;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-grid-layout",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "A draggable and resizable grid layout, as a Vue component.",
   "keywords": [
     "grid",
diff --git a/src/App.vue b/src/App.vue
@@ -48,13 +48,13 @@
                            :min-w="2"
                            :min-h="2"
                            :i="item.i"
-                           drag-allow-from=".vue-draggable-handle"
                            @resize="resize"
                            @move="move"
                            @resized="resized"
                            @moved="moved"
                 >
-                    <custom-drag-element :text="item.i"></custom-drag-element>
+                    <!--<custom-drag-element :text="item.i"></custom-drag-element>-->
+                    <test-element :text="item.i"></test-element>
                     <!--<button @click="clicked">CLICK ME!</button>-->
                 </grid-item>
             </grid-layout>
diff --git a/src/GridItem.vue b/src/GridItem.vue
@@ -26,7 +26,7 @@
     }
 
     .vue-grid-item.vue-draggable-dragging {
-        /*transition:none;*/
+        transition:none;
         z-index: 3;
     }
 
@@ -42,21 +42,6 @@
         user-select: none;
     }
 
-    /*.vue-grid-item > .vue-draggable-handle {
-        position: absolute;
-        width: 20px;
-        height: 20px;
-        top: 0;
-        left: 0;
-        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
-        background-position: bottom right;
-        padding: 0 8px 8px 0;
-        background-repeat: no-repeat;
-        background-origin: content-box;
-        box-sizing: border-box;
-        cursor: pointer;
-    }*/
-
     .vue-grid-item > .vue-resizable-handle {
         position: absolute;
         width: 20px;
@@ -516,7 +501,7 @@
                 const position = getControlPosition(event);
 
                 // Get the current drag point from the event. This is used as the offset.
-                if (position == null) return; // not possible but satisfies flow
+                if (position === null) return; // not possible but satisfies flow
                 const {x, y} = position;
 
                 var shouldUpdate = false;
diff --git a/src/GridLayout.vue b/src/GridLayout.vue
@@ -206,22 +206,26 @@
                 return bottom(this.layout) * (this.rowHeight + this.margin[1]) + this.margin[1] + 'px';
             },
             dragEvent: function (eventName, id, x, y, h, w) {
-                if (eventName == "dragmove" || eventName == "dragstart") {
-                    this.isDragging = true;
+                if (eventName === "dragmove" || eventName === "dragstart") {
                     this.placeholder.i = id;
                     this.placeholder.x = x;
                     this.placeholder.y = y;
                     this.placeholder.w = w;
                     this.placeholder.h = h;
+                    this.$nextTick(function() {
+                        this.isDragging = true;
+                    });
                     //this.$broadcast("updateWidth", this.width);
                     this.eventBus.$emit("updateWidth", this.width);
                 } else {
-                    this.isDragging = false;
+                    this.$nextTick(function() {
+                        this.isDragging = false;
+                    });
                 }
                 //console.log(eventName + " id=" + id + ", x=" + x + ", y=" + y);
                 var l = getLayoutItem(this.layout, id);
                 //GetLayoutItem sometimes returns null object
-                if (l == null){
+                if (l === null){
                     l = {x:0, y:0}
                 }
                 l.x = x;
@@ -234,22 +238,26 @@
                 this.updateHeight();
             },
             resizeEvent: function (eventName, id, x, y, h, w) {
-                if (eventName == "resizestart" || eventName == "resizemove") {
-                    this.isDragging = true;
+                if (eventName === "resizestart" || eventName === "resizemove") {
                     this.placeholder.i = id;
                     this.placeholder.x = x;
                     this.placeholder.y = y;
                     this.placeholder.w = w;
                     this.placeholder.h = h;
+                    this.$nextTick(function() {
+                        this.isDragging = true;
+                    });
                     //this.$broadcast("updateWidth", this.width);
                     this.eventBus.$emit("updateWidth", this.width);
 
                 } else {
-                    this.isDragging = false;
+                    this.$nextTick(function() {
+                        this.isDragging = false;
+                    });
                 }
                 var l = getLayoutItem(this.layout, id);
                 //GetLayoutItem sometimes return null object
-                if (l == null){
+                if (l === null){
                     l = {h:0, w:0}
                 }
                 l.h = h;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-grid-layout",`
`3`		`- "version": "2.1.7",`
	`3`	`+ "version": "2.1.8",`
`4`	`4`	`"description": "A draggable and resizable grid layout, as a Vue component.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"grid",`