@urbanstudio/ua-sortable 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -7,6 +7,18 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.0.1] — 2026-06-05
+
+### Fixed
+- Drag direction detection: `direction: "auto"` now checks `display:flex/inline-flex` before reading `flex-direction` — previously non-flex containers were incorrectly detected as `horizontal` (CSS default value for `flex-direction` is `row` even on block elements)
+- Placeholder now visible during drag as a dashed drop-indicator box (was `visibility:hidden`)
+- `setPointerCapture` is now called before `pointer-events:none` is applied — fixes drag-down failing in some browsers
+- Text selection during drag suppressed via `document.body.style.userSelect = "none"`
+- Cross-frame compatibility: `instanceof HTMLElement` replaced with `nodeType === 1` check
+- Original element is now used as its own drag ghost (no `cloneNode`) — renders with all inherited CSS intact
+
+---
+
 ## [1.0.0] — 2026-06-05
 
 ### Added

package/dist/ua-sortable.js

@@ -38,13 +38,15 @@
         #containerElement        = null;
         #options                 = {};
         #draggableElements       = [];
-        #ghostElement            = null;
         #draggedElement          = null;
         #placeholderElement      = null;
         #sourceContainerElement  = null;
         #currentContainerElement = null;
         #pointerStartX           = 0;
         #pointerStartY           = 0;
+        #dragOffsetX             = 0;
+        #dragOffsetY             = 0;
+        #savedDragStyle          = "";
         #delayTimer              = null;
         #isDragging              = false;
         #childObserver           = null;
@@ -54,7 +56,7 @@
         #boundHandlePointerCancel = null;
 
         constructor(containerElement, options = {}) {
-            if (!(containerElement instanceof HTMLElement)) {
+            if (!containerElement || containerElement.nodeType !== 1) {
                 throw new Error("UA_Sortable: first argument must be an HTMLElement");
             }
             if (UA_Sortable.#instanceRegistry.has(containerElement)) {
@@ -212,17 +214,18 @@
             this.#sourceContainerElement = this.#containerElement;
             this.#currentContainerElement = this.#containerElement;
             const r = dragged.getBoundingClientRect();
-            this.#ghostElement = dragged.cloneNode(true);
-            this.#ghostElement.classList.add(this.#options.ghostClass);
-            this.#ghostElement.style.cssText = `position:fixed;left:${r.left}px;top:${r.top}px;width:${r.width}px;height:${r.height}px;margin:0;pointer-events:none;z-index:9999;`;
-            document.body.appendChild(this.#ghostElement);
+            this.#dragOffsetX = e.clientX - r.left;
+            this.#dragOffsetY = e.clientY - r.top;
             this.#placeholderElement = document.createElement(dragged.tagName);
-            this.#placeholderElement.style.cssText = `width:${r.width}px;height:${r.height}px;opacity:0;pointer-events:none;`;
+            this.#placeholderElement.classList.add("ua-sortable-placeholder");
+            this.#placeholderElement.style.cssText = `width:${r.width}px;height:${r.height}px;pointer-events:none;`;
             dragged.parentNode.insertBefore(this.#placeholderElement, dragged);
+            try { dragged.setPointerCapture(e.pointerId); } catch (_) {}
+            this.#savedDragStyle = dragged.style.cssText;
+            dragged.style.cssText = `position:fixed;left:${r.left}px;top:${r.top}px;width:${r.width}px;margin:0;z-index:9999;pointer-events:none;`;
             dragged.classList.add(this.#options.dragClass);
-            dragged.style.opacity = "0.001";
             this.#containerElement.classList.add("ua-sortable-active");
-            try { dragged.setPointerCapture(e.pointerId); } catch (_) {}
+            document.body.style.userSelect = "none";
             document.addEventListener("pointermove",   this.#boundHandlePointerMove);
             document.addEventListener("pointerup",     this.#boundHandlePointerUp);
             document.addEventListener("pointercancel", this.#boundHandlePointerCancel);
@@ -230,10 +233,8 @@
         }
         #handlePointerMove(e) {
             if (!this.#isDragging) return;
-            const dx = e.clientX - this.#pointerStartX, dy = e.clientY - this.#pointerStartY;
-            const or = this.#draggedElement.getBoundingClientRect();
-            this.#ghostElement.style.left = `${or.left + dx}px`;
-            this.#ghostElement.style.top  = `${or.top  + dy}px`;
+            this.#draggedElement.style.left = `${e.clientX - this.#dragOffsetX}px`;
+            this.#draggedElement.style.top  = `${e.clientY - this.#dragOffsetY}px`;
             const tc = this.#findTargetContainer(e.clientX, e.clientY);
             if (tc && tc !== this.#currentContainerElement) {
                 this.#currentContainerElement.classList.remove("ua-sortable-active");
@@ -281,28 +282,28 @@
             return await Promise.resolve(this.#options.onMove(id, from, to, fromIds, toIds)) !== false;
         }
         #cleanupDragState() {
-            this.#ghostElement?.remove();
             this.#placeholderElement?.remove();
             if (this.#draggedElement) {
+                this.#draggedElement.style.cssText = this.#savedDragStyle;
                 this.#draggedElement.classList.remove(this.#options.dragClass);
-                this.#draggedElement.style.opacity = "";
             }
             this.#containerElement.classList.remove("ua-sortable-active");
             if (this.#currentContainerElement && this.#currentContainerElement !== this.#containerElement) {
                 this.#currentContainerElement.classList.remove("ua-sortable-active");
             }
             clearTimeout(this.#delayTimer);
+            document.body.style.userSelect = "";
             document.removeEventListener("pointermove",   this.#boundHandlePointerMove);
             document.removeEventListener("pointerup",     this.#boundHandlePointerUp);
             document.removeEventListener("pointercancel", this.#boundHandlePointerCancel);
-            this.#ghostElement = this.#placeholderElement = this.#draggedElement =
+            this.#placeholderElement = this.#draggedElement =
             this.#sourceContainerElement = this.#currentContainerElement = this.#delayTimer = null;
             this.#isDragging = false;
         }
         #updatePlaceholderPosition(px, py) {
             const tc = this.#currentContainerElement;
             const children = [...tc.children].filter(c =>
-                c !== this.#draggedElement && c !== this.#ghostElement &&
+                c !== this.#draggedElement &&
                 c !== this.#placeholderElement &&
                 (!this.#options.filter || !c.matches(this.#options.filter))
             );
@@ -317,8 +318,11 @@
         }
         #resolveDirection(el) {
             if (this.#options.direction !== "auto") return this.#options.direction;
-            const fd = getComputedStyle(el).flexDirection;
-            return (fd === "row" || fd === "row-reverse") ? "horizontal" : "vertical";
+            const style = getComputedStyle(el);
+            if (style.display === "flex" || style.display === "inline-flex") {
+                return (style.flexDirection === "row" || style.flexDirection === "row-reverse") ? "horizontal" : "vertical";
+            }
+            return "vertical";
         }
         #findDraggableParent(el) {
             let c = el;
@@ -344,7 +348,7 @@
     if (typeof document !== "undefined" && !document.getElementById("ua-sortable-styles")) {
         const s = document.createElement("style");
         s.id = "ua-sortable-styles";
-        s.textContent = ".ua-sortable-ghost{opacity:.4;}.ua-sortable-drag{opacity:.4;}.ua-sortable-active>.ua-sortable-over{border-top:2px solid var(--accent,#2563eb);}.ua-drag-handle{cursor:grab;touch-action:none;}.ua-drag-handle:active{cursor:grabbing;}";
+        s.textContent = ".ua-sortable-drag{opacity:.95;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:box-shadow .15s;}.ua-sortable-placeholder{border:2px dashed rgba(0,0,0,.18);border-radius:3px;box-sizing:border-box;background:rgba(0,0,0,.03);}.ua-sortable-active>.ua-sortable-over{border-top:2px solid var(--accent,#2563eb);}.ua-drag-handle{cursor:grab;touch-action:none;}.ua-drag-handle:active{cursor:grabbing;}";
         document.head.appendChild(s);
     }
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@urbanstudio/ua-sortable",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Pointer-Events-based drag-and-drop sorting for lists and grids. No dependencies.",
   "author": "Marian Feiler <mf@urbanstudio.de> (https://urbanstudio.de)",
   "license": "MIT",
   "homepage": "https://github.com/urbanstudioGmbH/ua-sortable#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/urbanstudioGmbH/ua-sortable.git"
+    "url": "git+https://github.com/urbanstudioGmbH/ua-sortable.git"
   },
   "bugs": {
     "url": "https://github.com/urbanstudioGmbH/ua-sortable/issues"

package/src/Sortable.js

@@ -21,13 +21,15 @@ export class UA_Sortable {
     #containerElement        = null;
     #options                 = {};
     #draggableElements       = [];
-    #ghostElement            = null;
     #draggedElement          = null;
     #placeholderElement      = null;
     #sourceContainerElement  = null;
     #currentContainerElement = null;
     #pointerStartX           = 0;
     #pointerStartY           = 0;
+    #dragOffsetX             = 0;
+    #dragOffsetY             = 0;
+    #savedDragStyle          = "";
     #delayTimer              = null;
     #isDragging              = false;
     #childObserver           = null;
@@ -43,7 +45,7 @@ export class UA_Sortable {
      * @param {object} options
      */
     constructor(containerElement, options = {}) {
-        if (!(containerElement instanceof HTMLElement)) {
+        if (!containerElement || containerElement.nodeType !== 1) {
             throw new Error("UA_Sortable: first argument must be an HTMLElement");
         }
         if (UA_Sortable.#instanceRegistry.has(containerElement)) {
@@ -309,35 +311,36 @@ export class UA_Sortable {
         this.#currentContainerElement = this.#containerElement;
 
         const boundingRect = draggedElement.getBoundingClientRect();
-        this.#ghostElement = draggedElement.cloneNode(true);
-        this.#ghostElement.classList.add(this.#options.ghostClass);
-        this.#ghostElement.style.cssText = [
-            "position:fixed",
-            `left:${boundingRect.left}px`,
-            `top:${boundingRect.top}px`,
-            `width:${boundingRect.width}px`,
-            `height:${boundingRect.height}px`,
-            "margin:0",
-            "pointer-events:none",
-            "z-index:9999",
-        ].join(";");
-        document.body.appendChild(this.#ghostElement);
 
+        this.#dragOffsetX = pointerEvent.clientX - boundingRect.left;
+        this.#dragOffsetY = pointerEvent.clientY - boundingRect.top;
+
+        // Placeholder keeps layout space — visible drop indicator
         this.#placeholderElement = document.createElement(draggedElement.tagName);
+        this.#placeholderElement.classList.add("ua-sortable-placeholder");
         this.#placeholderElement.style.cssText = [
             `width:${boundingRect.width}px`,
             `height:${boundingRect.height}px`,
-            "opacity:0",
             "pointer-events:none",
         ].join(";");
         draggedElement.parentNode.insertBefore(this.#placeholderElement, draggedElement);
 
+        try { draggedElement.setPointerCapture(pointerEvent.pointerId); } catch (_) {}
+
+        this.#savedDragStyle = draggedElement.style.cssText;
+        draggedElement.style.cssText = [
+            "position:fixed",
+            `left:${boundingRect.left}px`,
+            `top:${boundingRect.top}px`,
+            `width:${boundingRect.width}px`,
+            "margin:0",
+            "z-index:9999",
+            "pointer-events:none",
+        ].join(";");
         draggedElement.classList.add(this.#options.dragClass);
-        draggedElement.style.opacity = "0.001";
 
         this.#containerElement.classList.add("ua-sortable-active");
-
-        try { draggedElement.setPointerCapture(pointerEvent.pointerId); } catch (_) {}
+        document.body.style.userSelect = "none";
 
         document.addEventListener("pointermove",   this.#boundHandlePointerMove);
         document.addEventListener("pointerup",     this.#boundHandlePointerUp);
@@ -349,12 +352,8 @@ export class UA_Sortable {
     #handlePointerMove(pointerEvent) {
         if (!this.#isDragging) return;
 
-        const deltaX = pointerEvent.clientX - this.#pointerStartX;
-        const deltaY = pointerEvent.clientY - this.#pointerStartY;
-
-        const originalRect = this.#draggedElement.getBoundingClientRect();
-        this.#ghostElement.style.left = `${originalRect.left + deltaX}px`;
-        this.#ghostElement.style.top  = `${originalRect.top  + deltaY}px`;
+        this.#draggedElement.style.left = `${pointerEvent.clientX - this.#dragOffsetX}px`;
+        this.#draggedElement.style.top  = `${pointerEvent.clientY - this.#dragOffsetY}px`;
 
         const targetContainer = this.#findTargetContainer(pointerEvent.clientX, pointerEvent.clientY);
         if (targetContainer && targetContainer !== this.#currentContainerElement) {
@@ -454,12 +453,11 @@ export class UA_Sortable {
     }
 
     #cleanupDragState() {
-        this.#ghostElement?.remove();
         this.#placeholderElement?.remove();
 
         if (this.#draggedElement) {
+            this.#draggedElement.style.cssText = this.#savedDragStyle;
             this.#draggedElement.classList.remove(this.#options.dragClass);
-            this.#draggedElement.style.opacity = "";
         }
 
         this.#containerElement.classList.remove("ua-sortable-active");
@@ -468,11 +466,11 @@ export class UA_Sortable {
         }
 
         clearTimeout(this.#delayTimer);
+        document.body.style.userSelect = "";
         document.removeEventListener("pointermove",   this.#boundHandlePointerMove);
         document.removeEventListener("pointerup",     this.#boundHandlePointerUp);
         document.removeEventListener("pointercancel", this.#boundHandlePointerCancel);
 
-        this.#ghostElement            = null;
         this.#placeholderElement      = null;
         this.#draggedElement          = null;
         this.#sourceContainerElement  = null;
@@ -489,7 +487,6 @@ export class UA_Sortable {
         const targetContainer = this.#currentContainerElement;
         const children = [...targetContainer.children].filter(child =>
             child !== this.#draggedElement &&
-            child !== this.#ghostElement &&
             child !== this.#placeholderElement &&
             (!this.#options.filter || !child.matches(this.#options.filter))
         );
@@ -519,10 +516,13 @@ export class UA_Sortable {
 
     #resolveDirection(containerElement) {
         if (this.#options.direction !== "auto") return this.#options.direction;
-        const flexDirection = getComputedStyle(containerElement).flexDirection;
-        return (flexDirection === "row" || flexDirection === "row-reverse")
-            ? "horizontal"
-            : "vertical";
+        const style = getComputedStyle(containerElement);
+        if (style.display === "flex" || style.display === "inline-flex") {
+            return (style.flexDirection === "row" || style.flexDirection === "row-reverse")
+                ? "horizontal"
+                : "vertical";
+        }
+        return "vertical";
     }
 
     #findDraggableParent(targetElement) {
@@ -563,8 +563,8 @@ export class UA_Sortable {
     const style = document.createElement("style");
     style.id = "ua-sortable-styles";
     style.textContent = [
-        ".ua-sortable-ghost{opacity:.4;}",
-        ".ua-sortable-drag{opacity:.4;}",
+        ".ua-sortable-drag{opacity:.95;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:box-shadow .15s;}",
+        ".ua-sortable-placeholder{border:2px dashed rgba(0,0,0,.18);border-radius:3px;box-sizing:border-box;background:rgba(0,0,0,.03);}",
         ".ua-sortable-active>.ua-sortable-over{border-top:2px solid var(--accent,#2563eb);}",
         ".ua-drag-handle{cursor:grab;touch-action:none;}",
         ".ua-drag-handle:active{cursor:grabbing;}",