gistfile1.txt

  const handleDrag = (e: React.DragEvent<HTMLDivElement>, targetId: string): void => {
    e.preventDefault()
    let a = 1
    if (!draggedId || a) {
      return
    }

    const draggedRef = itemRefs.current.get(draggedId)
    const targetRef = itemRefs.current.get(targetId)

    if (!draggedRef?.current || !targetRef?.current) {
      return
    }

    const newOrder = [...currentOrder]
    const draggedIndex = newOrder.indexOf(draggedId)
    const currentIndex = currentOrder.indexOf(targetId)
    if (currentIndex === 0) {
      return
    }

    const previousIndex = currentIndex - 1
    const previousItem = currentOrder[previousIndex]
    const nextIndex = currentIndex + 1
    const nextItem = currentOrder[nextIndex]

    const previousItemRef = itemRefs.current.get(previousItem)
    const nextItemRef = itemRefs.current.get(nextItem)

    const targetRect = targetRef.current.getBoundingClientRect()

    const top = targetRect.y
    const bottom = targetRect.y + targetRect.height

    const distanceToTopItem = e.clientY - top
    if (distanceToTopItem < 10) {
      newOrder.splice(draggedIndex, 1)
      newOrder.splice(previousIndex, 0, draggedId)
      setCurrentOrder(newOrder)
      return
    }

    const distanceToBottomItem = bottom - e.clientY
    if (distanceToBottomItem < 10) {
      newOrder.splice(draggedIndex, 1)
      newOrder.splice(nextIndex, 0, draggedId)
      setCurrentOrder(newOrder)
    }

    // if ()
    // console.log('DRAGGED RECT', e.clientY - top, bottom - e.clientY)
  }