feat: natively handle drag and drop from outside

package.json

@@ -54,4 +54,4 @@
     "vue-template-compiler": "^2.7.8",
     "webpack-bundle-analyzer": "^3.9.0"
   }
-}
+}

src/App.vue

@@ -31,6 +31,7 @@
             <!-- Add to show rtl support -->
             <button @click="changeDirection">Change Direction</button>
             <input type="checkbox" v-model="draggable"/> Draggable
+            <input type="checkbox" v-model="droppable"/> Droppable
             <input type="checkbox" v-model="resizable"/> Resizable
             <input type="checkbox" v-model="mirrored"/> Mirrored
             <input type="checkbox" v-model="bounded"/> Bounded
@@ -41,13 +42,15 @@
                 Row Height: <input type="number" v-model="rowHeight"/> Col nums: <input type="number" v-model="colNum"/>
                 Margin x: <input type="number" v-model="marginX"/> Margin y: <input type="number" v-model="marginY"/>
             </div>
+            <div class="droppable-element" draggable="true" unselectable="on" @dragstart="onDroppableDragStart">Droppable Element (Drag me!)</div>
             <grid-layout
                     id="grid-layout"
                     :margin="[parseInt(marginX), parseInt(marginY)]"
                     :layout.sync="layout"
                     :col-num="parseInt(colNum)"
                     :row-height="rowHeight"
                     :is-draggable="draggable"
+                    :is-droppable="droppable"
                     :is-resizable="resizable"
                     :is-mirrored="mirrored"
                     :is-bounded="bounded"
@@ -57,6 +60,7 @@
                     :use-css-transforms="true"
                     :responsive="responsive"
                     :transformScale="transformScale"
+                    :before-drop-over="beforeDropOver"
                     @layout-created="layoutCreatedEvent"
                     @layout-before-mount="layoutBeforeMountEvent"
                     @layout-mounted="layoutMountedEvent"
@@ -170,14 +174,15 @@
                 layout: JSON.parse(JSON.stringify(testLayout)),
                 layout2: JSON.parse(JSON.stringify(testLayout)),
                 draggable: true,
+                droppable: true,
                 resizable: true,
                 mirrored: false,
                 responsive: true,
                 bounded: false,
                 transformScale: 1,
                 preventCollision: false,
                 compact: true,
-                restoreOnDrag: true,
+                restoreOnDrag: false,
                 rowHeight: 30,
                 colNum: 12,
                 index: 0,
@@ -287,8 +292,16 @@
             },
             breakpointChangedEvent: function(newBreakpoint, newLayout){
                 console.log("breakpoint changed breakpoint=", newBreakpoint, ", layout: ", newLayout );
+            },
+            onDroppableDragStart: function(event) {
+                event.dataTransfer.setData('my-drop-element', 'element');
+            },
+            beforeDropOver: function(event) {
+                if (event.dataTransfer.items.length === 1 && event.dataTransfer.items[0].type === 'my-drop-element') {
+                    return { w: 2, h: 1 };
+                }
+                return false;
             }
-
         },
     }
 </script>
@@ -331,4 +344,13 @@
   color: #2c3e50;
   /*margin-top: 60px;*/
 }
+
+.droppable-element {
+    width: 150px;
+    text-align: center;
+    background: #fdd;
+    border: 1px solid black;
+    margin: 10px 0;
+    padding: 10px;
+}
 </style>

src/components/GridItem.vue

@@ -89,6 +89,7 @@
     import {setTopLeft, setTopRight, setTransformRtl, setTransform} from '@/helpers/utils';
     import {getControlPosition, createCoreData} from '@/helpers/draggableUtils';
     import {getColsFromBreakpoint} from '@/helpers/responsiveUtils';
+    import {calcGridColWidth,calcXY,calcItemSize} from '@/helpers/calculateUtils';
     import {getDocumentDir} from "@/helpers/DOM";
     //    var eventBus = require('./eventBus');
 
@@ -478,6 +479,15 @@
                 } else {
                     return 'vue-resizable-handle';
                 }
+            },
+            positionParams() {
+                return {
+                    cols: this.cols,
+                    containerWidth: this.containerWidth,
+                    margin: this.margin,
+                    maxRows: this.maxRows,
+                    rowHeight: this.rowHeight
+                };
             }
         },
         methods: {
@@ -728,31 +738,13 @@
             calcPosition: function (x, y, w, h) {
                 const colWidth = this.calcColWidth();
                 // add rtl support
-                let out;
-                if (this.renderRtl) {
-                    out = {
-                        right: Math.round(colWidth * x + (x + 1) * this.margin[0]),
-                        top: Math.round(this.rowHeight * y + (y + 1) * this.margin[1]),
-                        // 0 * Infinity === NaN, which causes problems with resize constriants;
-                        // Fix this if it occurs.
-                        // Note we do it here rather than later because Math.round(Infinity) causes deopt
-                        width: w === Infinity ? w : Math.round(colWidth * w + Math.max(0, w - 1) * this.margin[0]),
-                        height: h === Infinity ? h : Math.round(this.rowHeight * h + Math.max(0, h - 1) * this.margin[1])
-                    };
-                } else {
-                    out = {
-                        left: Math.round(colWidth * x + (x + 1) * this.margin[0]),
-                        top: Math.round(this.rowHeight * y + (y + 1) * this.margin[1]),
-                        // 0 * Infinity === NaN, which causes problems with resize constriants;
-                        // Fix this if it occurs.
-                        // Note we do it here rather than later because Math.round(Infinity) causes deopt
-                        width: w === Infinity ? w : Math.round(colWidth * w + Math.max(0, w - 1) * this.margin[0]),
-                        height: h === Infinity ? h : Math.round(this.rowHeight * h + Math.max(0, h - 1) * this.margin[1])
-                    };
-                }
-
-
-                return out;
+                const { width, height } = calcItemSize(this.positionParams, w, h);
+                return {
+                    width,
+                    height,
+                    top: Math.round(this.rowHeight * y + (y + 1) * this.margin[1]),
+                    [this.renderRtl ? 'right': 'left']:  Math.round(colWidth * x + (x + 1) * this.margin[0]),
+                };
             },
             /**
              * Translate x and y coordinates from pixels to grid units.
@@ -762,29 +754,11 @@
              */
             // TODO check if this function needs change in order to support rtl.
             calcXY(top, left) {
-                const colWidth = this.calcColWidth();
-
-                // left = colWidth * x + margin * (x + 1)
-                // l = cx + m(x+1)
-                // l = cx + mx + m
-                // l - m = cx + mx
-                // l - m = x(c + m)
-                // (l - m) / (c + m) = x
-                // x = (left - margin) / (coldWidth + margin)
-                let x = Math.round((left - this.margin[0]) / (colWidth + this.margin[0]));
-                let y = Math.round((top - this.margin[1]) / (this.rowHeight + this.margin[1]));
-
-                // Capping
-                x = Math.max(Math.min(x, this.cols - this.innerW), 0);
-                y = Math.max(Math.min(y, this.maxRows - this.innerH), 0);
-
-                return {x, y};
+                return calcXY(this.positionParams, top, left, this.innerW, this.innerH);
             },
             // Helper for generating column width
             calcColWidth() {
-                const colWidth = (this.containerWidth - (this.margin[0] * (this.cols + 1))) / this.cols;
-               // console.log("### COLS=" + this.cols + " COL WIDTH=" + colWidth + " MARGIN " + this.margin[0]);
-                return colWidth;
+                return calcGridColWidth(this.positionParams);
             },
             // This can either be called:
             // calcGridItemWHPx(w, colWidth, margin[0])