added drag image offset

Author: cameron-toy

packages/dragdrop/src/index.ts

@@ -144,6 +144,8 @@ class Drag implements IDisposable {
     this.proposedAction = options.proposedAction || 'copy';
     this.supportedActions = options.supportedActions || 'all';
     this.source = options.source || null;
+    this._dragAdjustX = options.dragAdjustX || 0;
+    this._dragAdjustY = options.dragAdjustY || 0;
   }
 
   /**
@@ -233,6 +235,9 @@ class Drag implements IDisposable {
       return this._promise;
     }
 
+    this._dragOffsetX = this._dragAdjustX - clientX;
+    this._dragOffsetY = this._dragAdjustY - clientY;
+
     // Install the document listeners for the drag object.
     this._addListeners();
 
@@ -291,8 +296,8 @@ class Drag implements IDisposable {
       return;
     }
     let style = this.dragImage.style;
-    style.top = `${clientY}px`;
-    style.left = `${clientX}px`;
+    style.top = `${clientY + this.dragOffsetY}px`;
+    style.left = `${clientX + this.dragOffsetX}px`;
   }
 
   /**
@@ -311,7 +316,7 @@ class Drag implements IDisposable {
 
     // Move the drag image to the specified client position. This is
     // performed *after* dispatching to prevent unnecessary reflows.
-    this.moveDragImage(event.clientX, event.clientY);
+    this.moveDragImage(event.clientX + this.dragOffsetX, event.clientY + this.dragOffsetY);
   }
 
   /**
@@ -601,6 +606,14 @@ class Drag implements IDisposable {
     requestAnimationFrame(this._onScrollFrame);
   };
 
+  get dragOffsetX(): number {
+    return this._dragOffsetX;
+  }
+
+  get dragOffsetY(): number {
+    return this._dragOffsetY;
+  }
+
   private _disposed = false;
   private _dropAction: DropAction = 'none';
   private _override: IDisposable | null = null;
@@ -609,6 +622,10 @@ class Drag implements IDisposable {
   private _promise: Promise<DropAction> | null = null;
   private _scrollTarget: Private.IScrollTarget | null = null;
   private _resolve: ((value: DropAction) => void) | null = null;
+  private _dragAdjustX: number;
+  private _dragAdjustY: number;
+  private _dragOffsetX: number;
+  private _dragOffsetY: number;
 }
 
 
@@ -681,6 +698,20 @@ namespace Drag {
      * The default value is `null`.
      */
     source?: any;
+
+    /**
+     * How many pixels to offset the drag/image in the x direction.
+     *
+     * The default value is 0.
+     */
+    dragAdjustX?: number;
+
+    /**
+     * How many pixels to offset the drag/image in the y direction.
+     *
+     * The default value is 0.
+     */
+    dragAdjustY?: number;
   }
 
   /**
@@ -801,8 +832,8 @@ namespace Private {
   export
   function findScrollTarget(event: MouseEvent): IScrollTarget | null {
     // Look up the client mouse position.
-    let x = event.clientX;
-    let y = event.clientY;
+    const x = event.clientX + drag.dragOffsetX;
+    const y = event.clientY + drag.dragOffsetY;
 
     // Get the element under the mouse.
     let element: Element | null = document.elementFromPoint(x, y);
@@ -1174,8 +1205,8 @@ namespace Private {
     // Initialize the mouse event data.
     dragEvent.initMouseEvent(
       type, true, true, window, 0,
-      event.screenX, event.screenY,
-      event.clientX, event.clientY,
+      event.screenX + drag.dragOffsetX, event.screenY + drag.dragOffsetY,
+      event.clientX + drag.dragOffsetX, event.clientY + drag.dragOffsetY,
       event.ctrlKey, event.altKey,
       event.shiftKey, event.metaKey,
       event.button, related