diff --git a/demos/custom-node-card.html b/demos/custom-node-card.html
index b2b086da68..9efbb9714a 100644
--- a/demos/custom-node-card.html
+++ b/demos/custom-node-card.html
@@ -481,6 +481,9 @@
       container: 'mountNode',
       width: 800,
       height: 600,
+      modes: {
+        default: ['drag-node']
+      },
       defaultNode: {
         shape: 'card-node'
       }
diff --git a/src/behavior/drag-node.js b/src/behavior/drag-node.js
index 61ae278f23..71923ff4d7 100644
--- a/src/behavior/drag-node.js
+++ b/src/behavior/drag-node.js
@@ -194,29 +194,30 @@ module.exports = {
           attrs: {
             width: bbox.width,
             height: bbox.height,
-            x: x - bbox.width / 2,
-            y: y - bbox.height / 2,
+            x: x + bbox.x,
+            y: y + bbox.y,
             ...attrs
           }
         });
         this.target.set('delegateShape', this.shape);
       }
       this.shape.set('capture', false);
+    } else {
+      if (this.targets.length > 0) {
+        const clientX = e.x - this.origin.x + this.originPoint.minX;
+        const clientY = e.y - this.origin.y + this.originPoint.minY;
+        this.shape.attr({
+          x: clientX,
+          y: clientY
+        });
+      } else if (this.target) {
+        this.shape.attr({
+          x: x + bbox.x,
+          y: y + bbox.y
+        });
+      }
     }
 
-    if (this.targets.length > 0) {
-      const clientX = e.x - this.origin.x + this.originPoint.minX;
-      const clientY = e.y - this.origin.y + this.originPoint.minY;
-      this.shape.attr({
-        x: clientX,
-        y: clientY
-      });
-    } else if (this.target) {
-      this.shape.attr({
-        x: x - bbox.width / 2,
-        y: y - bbox.height / 2
-      });
-    }
     this.graph.paint();
   },
   /**