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])