add dependency for @interactjs/auto-scroll and add item option for interact js pass through (#580)

Co-authored-by: guangyao.huang <guangyao.huang@vipshop.com>

Author: llezenelrahc

package.json

@@ -29,12 +29,13 @@
     "test:cover": "vue-cli-service test:unit --coverage"
   },
   "dependencies": {
-    "element-resize-detector": "^1.2.1",
-    "@interactjs/interactjs": "^1.10.2",
-    "@interactjs/auto-start": "^1.10.2",
     "@interactjs/actions": "^1.10.2",
+    "@interactjs/auto-scroll": "^1.10.8",
+    "@interactjs/auto-start": "^1.10.2",
+    "@interactjs/dev-tools": "^1.10.2",
+    "@interactjs/interactjs": "^1.10.2",
     "@interactjs/modifiers": "^1.10.2",
-    "@interactjs/dev-tools": "^1.10.2"
+    "element-resize-detector": "^1.2.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.12.11",

src/components/GridItem.vue

@@ -93,6 +93,7 @@
     //    var eventBus = require('./eventBus');
 
     import '@interactjs/auto-start'
+    import '@interactjs/auto-scroll'
     import '@interactjs/actions/drag'
     import '@interactjs/actions/resize'
     import '@interactjs/modifiers'
@@ -201,6 +202,16 @@
                 type: Boolean,
                 required: false,
                 default: false,
+            },
+            dragOption:{
+                type:Object,
+                required: false,
+                default: ()=>({}),
+            },
+            resizeOption:{
+                type:Object,
+                required: false,
+                default: ()=>({}),
             }
         },
         inject: ["eventBus", "layout"],
@@ -769,7 +780,8 @@
                 if (this.draggable && !this.static) {
                     const opts = {
                         ignoreFrom: this.dragIgnoreFrom,
-                        allowFrom: this.dragAllowFrom
+                        allowFrom: this.dragAllowFrom,
+                        ...this.dragOption
                     };
                     this.interactObj.draggable(opts);
                     /*this.interactObj.draggable({allowFrom: '.vue-draggable-handle'});*/
@@ -818,7 +830,8 @@
                                 height: maximum.height,
                                 width: maximum.width
                             }
-                        }
+                        },
+                        ...this.resizeOption,
                     };
 
                     if (this.preserveAspectRatio) {