Need positions on Move and onMove function should be called on drop action

lib/components/Column.js

@@ -10,15 +10,19 @@ const columnTarget = {
     const { layout, rowIndex, columnIndex, onMove } = props;
     const item = monitor.getItem();
     if (item.columnIndex !== columnIndex || item.rowIndex !== rowIndex) {
-      const movedLayout = moveWidget(layout, {
+      const originalPosition = {
         rowIndex: item.rowIndex,
         columnIndex: item.columnIndex,
         widgetIndex: item.widgetIndex,
-      }, {
+      };
+
+      const destination = {
         rowIndex,
         columnIndex,
-      }, item.widgetName);
-      onMove(movedLayout);
+      };
+
+      const movedLayout = moveWidget(layout, originalPosition, destination, item.widgetName);
+      onMove(movedLayout, originalPosition, destination);
     }
   },
 };

lib/components/WidgetFrame.js

@@ -18,62 +18,66 @@ const boxSource = {
 };
 
 const cardTarget = {
-  hover(props, monitor, component) {
+  drop(props, monitor, component) {
     const dragIndex = monitor.getItem().widgetIndex;
-    const hoverIndex = props.widgetIndex;
+    const dropIndex = props.widgetIndex;
 
     // Don't replace items with themselves
-    if (dragIndex === hoverIndex) {
+    if (dragIndex === dropIndex) {
       return;
     }
 
     // Determine rectangle on screen
-    const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
+    const dropBoundingRect = findDOMNode(component).getBoundingClientRect();
 
     // Get vertical middle
-    const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+    const dropMiddleY = (dropBoundingRect.bottom - dropBoundingRect.top) / 2;
 
     // Determine mouse position
     const clientOffset = monitor.getClientOffset();
 
     // Get pixels to the top
-    const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+    const dropClientY = clientOffset.y - dropBoundingRect.top;
 
     // Only perform the move when the mouse has crossed half of the items height
     // When dragging downwards, only move when the cursor is below 50%
     // When dragging upwards, only move when the cursor is above 50%
 
     // Dragging downwards
-    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+    if (dragIndex < dropIndex && dropClientY < dropMiddleY) {
       return;
     }
 
     // Dragging upwards
-    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+    if (dragIndex > dropIndex && dropClientY > dropMiddleY) {
       return;
     }
 
     // Time to actually perform the action
     const { layout, columnIndex, rowIndex } = props;
 
     if (monitor.getItem().rowIndex === rowIndex && monitor.getItem().columnIndex === columnIndex) {
-      const newLayout = sortWidget(layout, {
+      const originalPosition = {
         rowIndex,
         columnIndex,
         widgetIndex: dragIndex,
-      }, {
+      };
+
+      const destination = {
         rowIndex,
         columnIndex,
-        widgetIndex: hoverIndex,
-      }, monitor.getItem().widgetName);
+        widgetIndex: dropIndex,
+      };
+
+      const newLayout = sortWidget(layout, originalPosition, destination, monitor.getItem().widgetName);
 
-      props.onMove(newLayout);
+      props.onMove(newLayout, originalPosition, destination);
 
       // Note: we're mutating the monitor item here!
       // Generally it's better to avoid mutations,
       // but it's good here for the sake of performance
       // to avoid expensive index searches.
-      monitor.getItem().widgetIndex = hoverIndex; // eslint-disable-line no-param-reassign
+      monitor.getItem().widgetIndex = dropIndex; // eslint-disable-line no-param-reassign
     }
   },
 };

lib/components/Widgets.js

@@ -10,7 +10,7 @@ const Widgets = ({ widgets, widgetTypes, onRemove, layout, columnIndex, rowIndex
   const createdWidgets = widgets.map((widget, index) => { // eslint-disable-line arrow-body-style
     return (
       <WidgetFrame
-        key={index}
+        key={`${index}-${widget.key}-${columnIndex}`}
         widgetName={widget.key}
         title={widgetTypes[widget.key].title}
         onRemove={onRemove}