@hkdigital/lib-sveltekit 0.1.78 → 0.1.79

package/dist/components/drag-drop/Draggable.svelte

@@ -145,7 +145,19 @@
 
     // Set custom drag image if needed
     if (event.dataTransfer.setDragImage) {
-      // Could set custom drag image here
+      // Custom drag image
+      const dragEl = /** @type {HTMLElement} */ (event.currentTarget);
+
+
+      // Get the bounding rectangle of the element
+      const rect = dragEl.getBoundingClientRect();
+
+      // Calculate offsets relative to the element's top-left corner
+      const offsetX = event.clientX - rect.left;
+      const offsetY = event.clientY - rect.top;
+
+      // Use the element as drag image with calculated offsets
+      event.dataTransfer.setDragImage(dragEl, offsetX, offsetY);
     }
 
     onDragStart?.({ event, item, source, group });
@@ -161,34 +173,34 @@
     }
   }
 
-  /**
-   * Handle drag end
-   * @param {DragEvent} event
-   */
-  function handleDragEnd(event) {
-    clearTimeout(dragTimeout);
+/**
+ * Handle drag end
+ * @param {DragEvent} event
+ */
+function handleDragEnd(event) {
+  clearTimeout(dragTimeout);
 
-    // Clear global drag state
-    dragState.end( draggableId );
+  // Clear global drag state
+  dragState.end(draggableId);
 
-    // Check if drop was successful
-    const wasDropped = event.dataTransfer.dropEffect !== 'none';
+  // Check if drop was successful
+  const wasDropped = event.dataTransfer.dropEffect !== 'none';
 
-    if (wasDropped) {
-      currentState = DROPPING;
-      onDrop?.({ event, item, wasDropped: true });
+  if (wasDropped) {
+    currentState = DROPPING;
+    onDrop?.({ event, item, wasDropped: true });
 
-      // Brief dropping state before returning to idle
-      setTimeout(() => {
-        currentState = IDLE;
-      }, 100);
-    } else {
+    // Brief dropping state before returning to idle
+    setTimeout(() => {
       currentState = IDLE;
-    }
-
-    onDragEnd?.({ event, item, wasDropped });
+    }, 100);
+  } else {
+    currentState = IDLE;
   }
 
+  onDragEnd?.({ event, item, wasDropped });
+}
+
   /**
    * Handle mouse down for drag delay
    * @param {MouseEvent} event

package/dist/themes/hkdev/components/drag-drop/draggable.css

@@ -1,12 +1,20 @@
 @define-mixin component-draggable {
   [data-component='draggable'] {
-    cursor: move;
     user-select: none;
     transition:
       opacity 0.2s ease,
       transform 0.2s ease;
   }
 
+  [data-component='draggable']:not(.state-dragging):not(.state-drag-disabled) {
+    cursor: grab;  /* Open hand when hovering draggable items */
+  }
+
+
+  /*[data-component='draggable']:active {
+    cursor: grabbing;
+  }*/
+
   /* State-based styling using state classes */
   [data-component='draggable'].state-idle {
     opacity: 1;
@@ -16,6 +24,7 @@
   [data-component='draggable'].state-dragging {
     opacity: 0.5;
     transform: scale(0.95);
+    cursor: grabbing;
   }
 
   [data-component='draggable'].state-drag-preview {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.78",
+	"version": "0.1.79",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"