Pass offsetX and offsetY as createDragPreview options to force offsets (

#776)

* Add offsetX and offsetY option to force preview offset

* handle offset equal 0

* split line in correct length lines

* Forced offsets are computed in getDragPreviewOffset

* Do not exceed max length of 100

docs/02 Connecting to DOM/DragSourceConnector.md

@@ -29,6 +29,10 @@ The functions returned by the connector methods also accept options. They need t
 
 * `anchorY`: Optional. A number betwen `0` and `1`. By default, `0.5`. Specifies how the offset relative to the drag source node is translated into the the vertical offset of the drag preview when their sizes don't match. `0` means “dock the preview to the top, `0.5` means “interpolate linearly” and `1` means “dock the preview to the bottom.
 
+* `offsetX`: Optional. A number or null if not needed. By default, null. Specifies the vertical offset between the cursor and the drag preview element. If offsetX has a value, anchorX won't be used.
+
+* `offsetY`: Optional. A number or null if not needed. By default, null. Specifies the vertical offset between the cursor and the drag preview element. If offsetY has a value, anchorY won't be used.
+
 ### Example
 
 Check out [the tutorial](docs-tutorial.html) for more real examples!

packages/react-dnd-html5-backend/src/HTML5Backend.js

@@ -314,15 +314,22 @@ export default class HTML5Backend {
         const sourceId = this.monitor.getSourceId();
         const sourceNode = this.sourceNodes[sourceId];
         const dragPreview = this.sourcePreviewNodes[sourceId] || sourceNode;
-        const { anchorX, anchorY } = this.getCurrentSourcePreviewNodeOptions();
+        const { anchorX, anchorY, offsetX, offsetY } = this.getCurrentSourcePreviewNodeOptions();
         const anchorPoint = { anchorX, anchorY };
+        const offsetPoint = { offsetX, offsetY };
         const dragPreviewOffset = getDragPreviewOffset(
           sourceNode,
           dragPreview,
           clientOffset,
           anchorPoint,
+          offsetPoint,
+        );
+
+        dataTransfer.setDragImage(
+          dragPreview,
+          dragPreviewOffset.x,
+          dragPreviewOffset.y,
         );
-        dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
       }
 
       try {

packages/react-dnd-html5-backend/src/OffsetUtils.js

@@ -26,7 +26,13 @@ export function getEventClientOffset(e) {
   };
 }
 
-export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint) {
+export function getDragPreviewOffset(
+  sourceNode,
+  dragPreview,
+  clientOffset,
+  anchorPoint,
+  offsetPoint,
+  ) {
   // The browsers will use the image intrinsic size under different conditions.
   // Firefox only cares if it's an image, but WebKit also wants it to be detached.
   const isImage = dragPreview.nodeName === 'IMG' && (
@@ -71,7 +77,7 @@ export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anch
     // Dock to the bottom
     offsetFromDragPreview.y + dragPreviewHeight - sourceHeight,
   ]);
-  const x = interpolantX.interpolate(anchorX);
+  let x = interpolantX.interpolate(anchorX);
   let y = interpolantY.interpolate(anchorY);
 
   // Work around Safari 8 positioning bug
@@ -80,5 +86,12 @@ export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anch
     y += (window.devicePixelRatio - 1) * dragPreviewHeight;
   }
 
+  // Force offsets if specified in the options.
+  const { offsetX, offsetY } = offsetPoint;
+  const forceOffsetX = offsetX === 0 || offsetX;
+  const forceOffsetY = offsetY === 0 || offsetY;
+  x = forceOffsetX ? offsetX : x;
+  y = forceOffsetY ? offsetY : y;
+
   return { x, y };
 }