@startupjs-ui/draggable 0.1.16 → 0.1.22

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.22](https://github.com/startupjs/startupjs-ui/compare/v0.1.21...v0.1.22) (2026-03-25)
+
+**Note:** Version bump only for package @startupjs-ui/draggable
+
+
+
+
+
+## [0.1.21](https://github.com/startupjs/startupjs-ui/compare/v0.1.20...v0.1.21) (2026-03-25)
+
+**Note:** Version bump only for package @startupjs-ui/draggable
+
+
+
+
+
+## [0.1.19](https://github.com/startupjs/startupjs-ui/compare/v0.1.18...v0.1.19) (2026-03-17)
+
+
+### Bug Fixes
+
+* **draggable:** placeholder position from ghost (element), not cursor ([#18](https://github.com/startupjs/startupjs-ui/issues/18)) ([fbb8d9a](https://github.com/startupjs/startupjs-ui/commit/fbb8d9a012e94f40fd93c2cc07b407f78399106e))
+
+
+
+
+
+## Unreleased
+
+### Fixes
+
+* **draggable:** placeholder position based on ghost (element) instead of cursor — same behavior regardless of grab point; equal slots + direction-aware index for reorder ([SortableJS-style](https://github.com/SortableJS/Sortable))
+* **draggable:** multi-drop 2D hit-test — ghost center (refX/refY) determines which Droppable is hovered; correct cross-list drag and dropHoverId
+* **droppable:** show placeholder when empty list is the active drop target (drag into empty zone)
+
 ## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
 
 **Note:** Version bump only for package @startupjs-ui/draggable

package/Draggable/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useRef, type ReactNode } from 'react'
-import { Animated, View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native'
+import { View, StyleSheet, Platform, type StyleProp, type ViewStyle } from 'react-native'
 import { State, PanGestureHandler } from 'react-native-gesture-handler'
 import { pug, observer } from 'startupjs'
 import { themed } from '@startupjs-ui/core'
@@ -51,81 +51,117 @@ function Draggable ({
   const ref = useRef<any>(null)
   const $dndContext = useContext(DragDropContext)
 
-  const animateStates = {
-    left: new Animated.Value(0),
-    top: new Animated.Value(0)
-  }
-
-  // init drags.dragId
   useEffect(() => {
-    $dndContext.drags[dragId].set({ ref, style: {} })
-  }, [ // eslint-disable-line react-hooks/exhaustive-deps
-    dragId,
-    _dropId,
-    _index,
-    $dndContext.drags[dragId].ref.current.get() // eslint-disable-line react-hooks/exhaustive-deps
-  ])
-
-  if (_dropId == null || _index == null) {
-    return pug`
-      View(style=style)= children
-    `
+    if (!$dndContext) return
+    if ($dndContext.drags[dragId]) {
+      $dndContext.drags[dragId].set({ ref, style: {} })
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dragId, _dropId, _index])
+
+  if (_dropId == null || _index == null || !$dndContext) {
+    return pug`View(style=style)= children`
   }
 
   const dropId = _dropId
   const index = _index
 
-  function onHandlerStateChange ({ nativeEvent }: any) {
-    const data = {
-      type,
-      dragId,
-      dropId,
-      dragStyle: { ...StyleSheet.flatten(style) },
-      startPosition: {
-        x: nativeEvent.x,
-        y: nativeEvent.y
-      }
-    }
+  async function onHandlerStateChange ({ nativeEvent }: any) {
+    const startAbsoluteX = nativeEvent.absoluteX ?? 0
+    const startAbsoluteY = nativeEvent.absoluteY ?? 0
 
     if (nativeEvent.state === State.BEGAN) {
-      ref.current.measure((dragX: any, dragY: any, dragWidth: any, dragHeight: any) => {
-        data.dragStyle.height = dragHeight
-
-        $dndContext.drops[dropId].ref.current.get().measure((dx: any, dy: any, dw: any, dropHeight: any) => {
-          // init states
-          $dndContext.drags[dragId].style.set({ display: 'none' })
-          $dndContext.assign({
-            activeData: data,
-            dropHoverId: dropId,
-            dragHoverIndex: index
-          })
+      const offsetX = nativeEvent.x ?? 0
+      const offsetY = nativeEvent.y ?? 0
+      const ghostLeft = startAbsoluteX - offsetX
+      const ghostTop = startAbsoluteY - offsetY
+
+      const flatStyle = StyleSheet.flatten(style) || {} as any
+      const data: Record<string, any> = {
+        type,
+        dragId,
+        dropId,
+        dragStyle: {
+          ...flatStyle,
+          height: flatStyle.height ?? 0,
+          width: flatStyle.width ?? 0
+        },
+        startPosition: { x: offsetX, y: offsetY },
+        startGhostTop: ghostTop,
+        x: startAbsoluteX,
+        y: startAbsoluteY,
+        ghostLeft,
+        ghostTop
+      }
+
+      const applyDragStart = (measuredHeight: number | null, measuredWidth: number | null) => {
+        if (measuredHeight != null || measuredWidth != null) {
+          data.dragStyle = {
+            ...data.dragStyle,
+            ...(typeof measuredHeight === 'number' && { height: measuredHeight }),
+            ...(typeof measuredWidth === 'number' && { width: measuredWidth })
+          }
+        }
+        $dndContext.drags[dragId].style.set({ display: 'none' })
+        $dndContext.assign({
+          activeData: data,
+          dropHoverId: dropId,
+          dragHoverIndex: index
+        })
 
-          onDragBegin && onDragBegin({
+        if (onDragBegin) {
+          onDragBegin({
             dragId: data.dragId,
             dropId: data.dropId,
             dropHoverId: dropId,
             hoverIndex: index
           })
+        }
+      }
+
+      if (ref.current?.measure) {
+        ref.current.measure((_x: number, _y: number, dragWidth: number, dragHeight: number) => {
+          applyDragStart(dragHeight, dragWidth)
         })
-      })
+      } else {
+        applyDragStart(null, null)
+      }
     }
 
     if (nativeEvent.state === State.END) {
-      animateStates.left.setValue(0)
-      animateStates.top.setValue(0)
-
-      onDragEnd && onDragEnd({
-        dragId: $dndContext.activeData.dragId.get(),
-        dropId: $dndContext.activeData.dropId.get(),
-        dropHoverId: $dndContext.dropHoverId.get(),
-        hoverIndex: $dndContext.dragHoverIndex.get()
-      })
+      const clearDragState = () => {
+        $dndContext.assign({
+          drags: { [dragId]: { style: {} } },
+          activeData: {},
+          dropHoverId: '',
+          dragHoverIndex: null
+        })
+      }
+      try {
+        const finalY = nativeEvent.absoluteY ?? $dndContext.activeData.y.get()
+        const finalX = nativeEvent.absoluteX ?? $dndContext.activeData.x.get()
+        $dndContext.activeData.x.set(finalX)
+        $dndContext.activeData.y.set(finalY)
+        const activeDataSnap = { ...$dndContext.activeData.get(), y: finalY, x: finalX }
+        const finalHoverIndex = await checkPosition(activeDataSnap)
+        const hoverIndex = finalHoverIndex ?? $dndContext.dragHoverIndex.get()
+
+        if (onDragEnd) {
+          onDragEnd({
+            dragId: $dndContext.activeData.dragId.get(),
+            dropId: $dndContext.activeData.dropId.get(),
+            dropHoverId: $dndContext.dropHoverId.get(),
+            hoverIndex
+          })
+        }
+      } finally {
+        clearDragState()
+      }
+    }
 
-      // reset states
+    if (nativeEvent.state === State.CANCELLED || nativeEvent.state === State.FAILED) {
       $dndContext.assign({
-        drags: {
-          [dragId]: { style: {} }
-        },
+        drags: { [dragId]: { style: {} } },
         activeData: {},
         dropHoverId: '',
         dragHoverIndex: null
@@ -136,116 +172,173 @@ function Draggable ({
   function onGestureEvent ({ nativeEvent }: any) {
     if (!$dndContext.dropHoverId.get()) return
 
-    animateStates.left.setValue(
-      nativeEvent.absoluteX - $dndContext.activeData.startPosition.x.get()
-    )
-    animateStates.top.setValue(
-      nativeEvent.absoluteY - $dndContext.activeData.startPosition.y.get()
-    )
-
+    const left = nativeEvent.absoluteX - $dndContext.activeData.startPosition.x.get()
+    const top = nativeEvent.absoluteY - $dndContext.activeData.startPosition.y.get()
+    $dndContext.activeData.ghostLeft.set(left)
+    $dndContext.activeData.ghostTop.set(top)
     $dndContext.activeData.x.set(nativeEvent.absoluteX)
     $dndContext.activeData.y.set(nativeEvent.absoluteY)
     checkPosition($dndContext.activeData.get())
   }
 
-  function checkPosition (activeData: any) {
-    $dndContext.drops[dropId].ref.current.get().measure(async (dX: any, dY: any, dWidth: any, dHeight: any, dPageX: any, dPageY: any) => {
-      const positions: any[] = []
-      let startPosition = dPageY
-      let endPosition = dPageY
-
-      const dragsLength = $dndContext.drops[$dndContext.dropHoverId.get()].items.get()?.length || 0
-
-      for (let index = 0; index < dragsLength; index++) {
-        if (!$dndContext.dropHoverId.get()) break
+  async function checkPosition (activeData: any): Promise<number | null> {
+    const ghostTopNow = activeData.ghostTop
+    const ghostLeftNow = activeData.ghostLeft
+    const ghostHeight = activeData.dragStyle?.height ?? 0
+    const ghostWidth = activeData.dragStyle?.width ?? 0
+    const refY = ghostTopNow != null ? ghostTopNow + ghostHeight / 2 : activeData.y
+    const refX = ghostLeftNow != null ? ghostLeftNow + ghostWidth / 2 : activeData.x
+    if (refY == null) return await Promise.resolve(null)
+
+    const dropIds = Object.keys($dndContext.drops.get() ?? {})
+    if (dropIds.length === 0) return await Promise.resolve(null)
+
+    const measureDrop = async (id: string) => {
+      const dref = $dndContext.drops[id].ref.current?.get()
+      if (!dref?.measureInWindow && !dref?.measure) return await Promise.resolve(null)
+      return await new Promise<{ id: string, left: number, right: number, top: number, bottom: number } | null>((resolve) => {
+        if (typeof dref.measureInWindow === 'function') {
+          dref.measureInWindow((x: number, y: number, w: number, h: number) => { resolve({ id, left: x, right: x + (w ?? 0), top: y, bottom: y + (h ?? 0) }) })
+        } else {
+          dref.measure((_x: number, _y: number, _w: number, dH: number, px: number, py: number) => {
+            const top = py ?? _y
+            const left = px ?? _x
+            resolve({ id, left, right: left + (_w ?? 0), top, bottom: top + (dH ?? 0) })
+          })
+        }
+      })
+    }
 
-        const iterDragId = $dndContext.drops[$dndContext.dropHoverId.get()].items[index].get()
+    return await Promise.all(dropIds.map(measureDrop)).then((results) => {
+      const hit = results.find((r) => r && refY >= r.top && refY < r.bottom && (refX == null || (refX >= r.left && refX < r.right)))
+      const targetDropId = hit ? hit.id : dropIds[0]
+      const fallback = results.find((r) => r && r.id === targetDropId)
+      const dropTop = (hit ?? fallback)?.top ?? 0
+      const dropBottom = (hit ?? fallback)?.bottom ?? 0
+      $dndContext.dropHoverId.set(targetDropId)
+
+      const items = $dndContext.drops[targetDropId].items.get() ?? []
+      if (items.length === 0) {
+        $dndContext.dragHoverIndex.set(0)
+        return 0
+      }
 
-        await new Promise<void>(resolve => {
-          const currentElement = $dndContext.drags[iterDragId].ref.current.get()
-          if (!currentElement) {
-            positions.push(null)
-            resolve()
-            return
-          }
-          currentElement.measure((x: any, y: any, width: any, height: any, pageX: any, pageY: any) => {
-            if (index === 0) {
-              startPosition = dPageY
-              endPosition = dPageY + y + (height / 2)
-            } else {
-              startPosition = endPosition
-              endPosition = pageY + (height / 2)
-            }
-
-            if (iterDragId === dragId) {
-              positions.push(null)
-            } else {
-              positions.push({ start: startPosition, end: endPosition })
-            }
-
-            resolve()
-          })
+      const n = items.length
+      const dropHeight = dropBottom - dropTop
+      const slotHeight = dropHeight / n
+      const rects: Array<{ top: number, bottom: number, height: number }> = []
+      for (let i = 0; i < n; i++) {
+        rects.push({
+          top: dropTop + i * slotHeight,
+          bottom: dropTop + (i + 1) * slotHeight,
+          height: slotHeight
         })
       }
 
-      positions.push({ start: endPosition, end: dPageY + dHeight })
-
-      for (let index = 0; index < positions.length; index++) {
-        const position = positions[index]
-        if (!position) continue
+      if (refY < rects[0].top) {
+        $dndContext.dragHoverIndex.set(0)
+        return 0
+      }
+      if (refY >= rects[n - 1].bottom) {
+        $dndContext.dragHoverIndex.set(n)
+        return n
+      }
 
-        if (activeData.y > position.start && activeData.y < position.end) {
-          $dndContext.dragHoverIndex.set(index)
+      const startGhostTop = activeData.startGhostTop ?? activeData.ghostTop
+      const movingDown = ghostTopNow >= startGhostTop
+      const upThreshold = 0.001
+      let hoverIndex = 0
+      for (let i = 0; i < n; i++) {
+        const r = rects[i]
+        if (refY >= r.top && refY < r.bottom) {
+          const relY = r.height > 0 ? (refY - r.top) / r.height : 0
+          if (movingDown) {
+            hoverIndex = Math.min(i + 1, n)
+          } else {
+            hoverIndex = relY < upThreshold && i > 0 ? i - 1 : i
+          }
           break
         }
+        if (refY < r.top) {
+          hoverIndex = i
+          break
+        }
+        hoverIndex = i + 1
       }
-    })
+
+      $dndContext.dragHoverIndex.set(hoverIndex)
+      return hoverIndex
+    }).then(async (hoverIndex) => await Promise.resolve(hoverIndex))
   }
 
-  const contextStyle = $dndContext.drags[dragId].style.get() || {}
-  const _style: any = StyleSheet.flatten([style, animateStates])
+  const contextStyle = $dndContext.drags[dragId] ? ($dndContext.drags[dragId].style.get() ?? {}) : {}
+  const flatStyle = StyleSheet.flatten(style) || {} as any
+
+  const dragStyleRaw = $dndContext.activeData.dragStyle?.get()
+  const dragStyle = dragStyleRaw && typeof dragStyleRaw === 'object' ? dragStyleRaw : null
+  const getNum = (v: any): number | undefined =>
+    v == null
+      ? undefined
+      : typeof v?.get === 'function'
+        ? v.get()
+        : typeof v === 'number'
+          ? v
+          : undefined
+  const phHeight = dragStyle ? getNum(dragStyle.height) : undefined
+  const phWidth = dragStyle ? getNum(dragStyle.width) : undefined
+
+  const isActiveDrag = $dndContext.activeData.dragId.get() === dragId
+  const ghostLeft = isActiveDrag ? ($dndContext.activeData.ghostLeft.get() ?? 0) : 0
+  const ghostTop = isActiveDrag ? ($dndContext.activeData.ghostTop.get() ?? 0) : 0
+  const ghostStyle: ViewStyle = {
+    ...flatStyle,
+    position: Platform.OS === 'web' ? ('fixed' as any) : 'absolute',
+    left: ghostLeft,
+    top: ghostTop,
+    ...(typeof phWidth === 'number' && phWidth > 0 && { width: phWidth }),
+    ...(typeof phHeight === 'number' && phHeight > 0 && { height: phHeight })
+  }
+  if (Platform.OS === 'web') {
+    (ghostStyle as Record<string, unknown>).cursor = 'default'
+  }
 
-  const isShowPlaceholder = $dndContext.activeData.get() &&
+  const isShowPlaceholder =
+    $dndContext.activeData.get() &&
     $dndContext.dropHoverId.get() === dropId &&
     $dndContext.dragHoverIndex.get() === index
 
-  const isShowLastPlaceholder = $dndContext.activeData.get() &&
+  const isShowLastPlaceholder =
+    $dndContext.activeData.get() &&
     $dndContext.dropHoverId.get() === dropId &&
-    $dndContext.drops[dropId].items.get().length - 1 === index &&
+    ($dndContext.drops[dropId].items.get() ?? []).length - 1 === index &&
     $dndContext.dragHoverIndex.get() === index + 1
 
-  const placeholder = pug`
-    View.placeholder(
-      style={
-        height: $dndContext.activeData.get() && $dndContext.activeData.dragStyle.get() && $dndContext.activeData.dragStyle.height.get(),
-        marginTop: $dndContext.activeData.get() && $dndContext.activeData.dragStyle.get() && $dndContext.activeData.dragStyle.marginTop.get(),
-        marginBottom: $dndContext.activeData.get() && $dndContext.activeData.dragStyle.get() && $dndContext.activeData.dragStyle.marginBottom.get()
-      }
-    )
-  `
+  const placeholderStyle: ViewStyle = {
+    ...flatStyle,
+    backgroundColor: 'var(--color-bg-main-subtle-alt, #e5e7eb)' as any,
+    minHeight: 32,
+    borderRadius: flatStyle.borderRadius ?? 4,
+    ...(typeof phHeight === 'number' && phHeight > 0 && { height: phHeight }),
+    ...(typeof phWidth === 'number' && phWidth > 0 && { width: phWidth })
+  }
 
   return pug`
     if isShowPlaceholder
-      = placeholder
+      View(style=placeholderStyle)
 
     Portal
-      if $dndContext.activeData.dragId.get() === dragId
-        Animated.View(style=[
-          _style,
-          { position: 'absolute', cursor: 'default' }
-        ])= children
+      if isActiveDrag
+        View(style=ghostStyle)= children
 
     PanGestureHandler(
       onHandlerStateChange=onHandlerStateChange
       onGestureEvent=onGestureEvent
     )
-      Animated.View(
-        ref=ref
-        style=[style, contextStyle]
-      )= children
+      View(ref=ref style=[style, contextStyle])
+        = children
 
     if isShowLastPlaceholder
-      = placeholder
+      View(style=placeholderStyle)
   `
 }
 

package/Droppable/index.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useContext, type ReactNode } from 'react'
-import { View, StatusBar, type StyleProp, type ViewStyle } from 'react-native'
-import { pug, observer, $ } from 'startupjs'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
 import { themed } from '@startupjs-ui/core'
 import { DragDropContext } from '../DragDropProvider'
 
@@ -15,6 +15,8 @@ export interface DroppableProps {
   type?: string
   /** Unique droppable container id */
   dropId: string
+  /** Optional: explicit list of item ids (e.g. when list is controlled and may be empty) */
+  items?: string[]
   /** Called when active drag leaves this droppable */
   onLeave?: () => void
   /** Called when active drag enters this droppable */
@@ -26,72 +28,43 @@ function Droppable ({
   style,
   type,
   dropId,
+  items: itemsProp,
   onLeave,
   onHover
 }: DroppableProps): ReactNode {
   const ref = useRef<any>(null)
   const $dndContext = useContext(DragDropContext)
-  const $isHover = $(false)
 
   useEffect(() => {
+    if (!$dndContext) return
+    const fromProp = Array.isArray(itemsProp) && itemsProp.length > 0
+    const items = fromProp
+      ? itemsProp
+      : React.Children.map(children as any, (child: any) => child?.props?.dragId)
     $dndContext.drops[dropId].set({
       ref,
-      items: React.Children.map(children as any, (child: any) => {
-        return child?.props?.dragId
-      })
+      items: items ?? []
     })
-  }, [children, dropId, $dndContext])
+  }, [children, dropId, itemsProp, $dndContext])
 
-  useEffect(() => {
-    ref.current.measure((x: any, y: any, width: any, height: any, pageX: any, pageY: any) => {
-      if (!$dndContext.activeData.dragId.get() || !$dndContext.dropHoverId.get()) {
-        $isHover.set(false)
-        return
-      }
-
-      const leftBorder = pageX
-      const rightBorder = pageX + width
-      const topBorder = pageY
-      const bottomBorder = pageY + height
-
-      const isHoverUpdate = (
-        $dndContext.activeData.x.get() > leftBorder &&
-        $dndContext.activeData.x.get() < rightBorder &&
-        $dndContext.activeData.y.get() - (StatusBar.currentHeight ?? 0) > topBorder &&
-        $dndContext.activeData.y.get() - (StatusBar.currentHeight ?? 0) < bottomBorder
-      )
-
-      if (isHoverUpdate && !$isHover.get()) {
-        $dndContext.dropHoverId.set(dropId)
-        onHover && onHover() // TODO
-      }
+  if (!$dndContext) return children as ReactNode
 
-      if (!isHoverUpdate && $isHover.get()) {
-        onLeave && onLeave() // TODO
-      }
-
-      $isHover.set(isHoverUpdate)
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify($dndContext.activeData.get())])
-
-  const modChildren = React.Children.toArray(children).map((child: any, index) => {
-    return React.cloneElement(child, {
-      ...child.props,
-      _dropId: dropId,
-      _index: index
-    })
-  })
+  const modChildren = React.Children.toArray(children).map((child: any, index) =>
+    React.cloneElement(child, { ...child.props, _dropId: dropId, _index: index })
+  )
 
-  const hasActiveDrag = $dndContext.drops[dropId].items.get()?.includes($dndContext.activeData.dragId.get())
+  const hasActiveDrag = ($dndContext.drops[dropId].items.get() ?? []).includes($dndContext.activeData.dragId?.get())
   const activeStyle = hasActiveDrag ? { zIndex: 9999 } : {}
-  const contextStyle = $dndContext.drops[dropId].style.get() || {}
+  const contextStyle = $dndContext.drops[dropId].style?.get() ?? {}
+  const items = $dndContext.drops[dropId].items.get() ?? []
+  const isHoverTargetEmpty = $dndContext.activeData.get() && $dndContext.dropHoverId.get() === dropId && items.length === 0
+  const emptyPlaceholderStyle: ViewStyle = { backgroundColor: 'var(--color-bg-main-subtle-alt, #e5e7eb)' as any, minHeight: 32, borderRadius: 4 }
 
   return pug`
-    View(
-      ref=ref
-      style=[style, activeStyle, contextStyle]
-    )= modChildren
+    View(ref=ref style=[style, activeStyle, contextStyle])
+      if isHoverTargetEmpty
+        View(style=emptyPlaceholderStyle)
+      = modChildren
   `
 }
 

package/index.cssx.styl

@@ -1,3 +1,3 @@
 .placeholder
-  background-color var(--color-bg-main-subtle-alt)
+  background-color var(--color-bg-main-subtle-alt, #e5e7eb)
   border-radius .5u

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/draggable",
-  "version": "0.1.16",
+  "version": "0.1.22",
   "publishConfig": {
     "access": "public"
   },
@@ -8,8 +8,8 @@
   "types": "index.d.ts",
   "type": "module",
   "dependencies": {
-    "@startupjs-ui/core": "^0.1.11",
-    "@startupjs-ui/portal": "^0.1.16"
+    "@startupjs-ui/core": "^0.1.22",
+    "@startupjs-ui/portal": "^0.1.22"
   },
   "peerDependencies": {
     "react": "*",
@@ -17,5 +17,5 @@
     "react-native-gesture-handler": "*",
     "startupjs": "*"
   },
-  "gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
+  "gitHead": "3bd18c16f0f203ee3d940bf2e09381edc0034665"
 }