Fix position of drag image

packages/default-theme/style/tabbar.css

@@ -93,5 +93,4 @@
   min-width: 125px;
   border: none;
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
-  transform: translateX(-40%) translateY(-58%);
 }

packages/widgets/src/dockpanel.ts

@@ -1024,7 +1024,7 @@ export class DockPanel extends Widget {
     sender.releaseMouse();
 
     // Extract the data from the args.
-    let { title, tab, clientX, clientY } = args;
+    let { title, tab, clientX, clientY, offset } = args;
 
     // Setup the mime data for the drag operation.
     let mimeData = new MimeData();
@@ -1033,6 +1033,10 @@ export class DockPanel extends Widget {
 
     // Create the drag image for the drag operation.
     let dragImage = tab.cloneNode(true) as HTMLElement;
+    if (offset) {
+      dragImage.style.top = `-${offset.y}px`;
+      dragImage.style.left = `-${offset.x}px`;
+    }
 
     // Create the drag object to manage the drag-drop operation.
     this._drag = new Drag({

packages/widgets/src/tabbar.ts

@@ -850,6 +850,10 @@ export class TabBar<T> extends Widget {
         data.tabSize = tabRect.height;
         data.tabPressPos = data.pressY - tabRect.top;
       }
+      data.tabPressOffset = {
+        x: data.pressX - tabRect.left,
+        y: data.pressY - tabRect.top
+      };
       data.tabLayout = Private.snapTabLayout(tabs, this._orientation);
       data.contentRect = this.contentNode.getBoundingClientRect();
       data.override = Drag.overrideCursor('default');
@@ -875,7 +879,14 @@ export class TabBar<T> extends Widget {
       let title = this._titles[index];
 
       // Emit the tab detach requested signal.
-      this._tabDetachRequested.emit({ index, title, tab, clientX, clientY });
+      this._tabDetachRequested.emit({
+        index,
+        title,
+        tab,
+        clientX,
+        clientY,
+        offset: data.tabPressOffset
+      });
 
       // Bail if the signal handler aborted the drag.
       if (data.dragAborted) {
@@ -1472,6 +1483,11 @@ export namespace TabBar {
      * The current client Y position of the mouse.
      */
     readonly clientY: number;
+
+    /**
+     * The mouse position in the tab coordinate.
+     */
+    readonly offset?: { x: number; y: number };
   }
 
   /**
@@ -1764,6 +1780,13 @@ namespace Private {
      */
     tabPressPos: number;
 
+    /**
+     * The original mouse position in tab coordinates.
+     *
+     * This is undefined if the drag is not active.
+     */
+    tabPressOffset?: { x: number; y: number };
+
     /**
      * The tab target index upon mouse release.
      *

review/api/widgets.api.md

@@ -1134,6 +1134,10 @@ export namespace TabBar {
         readonly clientX: number;
         readonly clientY: number;
         readonly index: number;
+        readonly offset?: {
+            x: number;
+            y: number;
+        };
         readonly tab: HTMLElement;
         readonly title: Title<T>;
     }