Merge pull request #484 from jbaysolutions/pr/458

Added use-style-cursor options to GridLayout.

Author: gmsa

README-zh_CN.md

@@ -287,6 +287,13 @@ Also check https://cli.vuejs.org/guide/build-targets.html#library
 
     设置每个断点对应的列数。
 
+* **useStyleCursor**
+
+    * type: `Boolean`
+    * required: `false`
+    * default: `true`
+
+    标识是否使用动态鼠标指针样式。当拖动出现卡顿时，将此值设为 `false`也许可以缓解布局问题。
 
 ##### GridItem
 

src/components/GridItem.vue

@@ -208,6 +208,7 @@
                 draggable: null,
                 resizable: null,
                 useCssTransforms: true,
+                useStyleCursor: true,
 
                 isDragging: false,
                 dragging: null,
@@ -317,6 +318,7 @@
                 this.resizable = this.isResizable;
             }
             this.useCssTransforms = this.layout.useCssTransforms;
+            this.useStyleCursor = this.layout.useStyleCursor;
             this.createStyle();
         },
         watch: {
@@ -743,6 +745,9 @@
                 const self = this;
                 if (this.interactObj === null || this.interactObj === undefined) {
                     this.interactObj = interact(this.$refs.item);
+                    if (!this.useStyleCursor) {
+                        this.interactObj.styleCursor(false);
+                    }
                 }
                 if (this.draggable && !this.static) {
                     const opts = {
@@ -767,6 +772,9 @@
                 const self = this;
                 if (this.interactObj === null || this.interactObj === undefined) {
                     this.interactObj = interact(this.$refs.item);
+                    if (!this.useStyleCursor) {
+                        this.interactObj.styleCursor(false);
+                    }
                 }
                 if (this.resizable && !this.static) {
                     let maximum = this.calcPosition(0,0,this.maxW, this.maxH);

src/components/GridLayout.vue

@@ -107,6 +107,10 @@
             preventCollision: {
                 type: Boolean,
                 default: false
+            },
+            useStyleCursor: {
+                type: Boolean,
+                default: true
             }
         },
         data: function () {