u

src/index.css

@@ -21,6 +21,8 @@ body {
 .sortable-drag {
   opacity: 1 !important;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
+  cursor: grabbing !important;
+  user-select: none !important;
 }
 
 /* Shopify Droppable: aktuell anvisierte Ziel-Kachel hervorheben */

src/pages/artikel/kategorien.jsx

@@ -236,6 +236,10 @@ class ArtikelKategorienPage extends Component {
       ghostClass: 'sortable-ghost',
       dragClass: 'sortable-drag',
       filter: '.not-sortable, .sortable-handle-btn',
+      // Eigener Fallback-Drag statt nativer HTML5-DnD: sonst zeigt der Browser
+      // über Button/Input den Text-I-Cursor bzw. native Hover-Stile.
+      forceFallback: true,
+      fallbackOnBody: true,
       onStart: this.handleSortStart,
       onEnd: this.handleSort,
     });
@@ -247,6 +251,7 @@ class ArtikelKategorienPage extends Component {
       this.sortable = null;
     }
     this.checkpointOrder = null;
+    document.body.classList.remove('tree-dragging');
   };
 
   sortableIds = () => {
@@ -261,9 +266,11 @@ class ArtikelKategorienPage extends Component {
   handleSortStart = () => {
     // Snapshot der Reihenfolge vor dem ersten Drag.
     this.checkpointOrder = this.sortableIds();
+    document.body.classList.add('tree-dragging');
   };
 
   handleSort = () => {
+    document.body.classList.remove('tree-dragging');
     const ids = this.sortableIds();
     const before = this.checkpointOrder ?? [];
     this.checkpointOrder = null;