Simple drag and drop list

[prpanto]

Request: Open discussions to talk without open issues

After hours I cant manage to work with this lib. I dont know why and I dont understand how works properly. This lib is awesome but pure documentation, it need more examples.

I think drag directive have problem and it didnt work at all. Maybe I will give a try another time. I use useGesture but didnt work.

<template>
  <div ref="container" class="h-screen flex flex-col justify-center items-center space-y-10">
    <span v-for="n in 3" :key="n" class="flex justify-center items-center size-12 bg-emerald-600 rounded text-lg font-bold select-none cursor-grab">{{ n }}</span>
  </div>
</template>

<script setup>
import { useSpring, useMotionProperties } from '@vueuse/motion'
import { useDrag } from '@vueuse/gesture'
import clamp from 'lodash/clamp'

const container = ref()
const boxes = computed(() => Array.from(container.value.children).map((box) => ({
  element: box,
  y: box.getBoundingClientRect().y,
  x: box.getBoundingClientRect().x,
})))

onMounted(() => {
  boxes.value.map((box, index) => {
    const { motionProperties } = useMotionProperties(box.element, {
      cursor: 'grab',
      x: 0,
      y: 0
    })

    const { set } = useSpring(motionProperties, {
      damping: 50,
      stiffness: 1000,
    })

    useDrag(
      ({ movement: [x, y], dragging }) => {
        console.log(x, y, dragging);
        if (!dragging) {
          set({ y: 0, cursor: 'grab' })

          return
        }

        const currentY = clamp(Math.round((index * 100 + y) / 100), 0, child.length - 1)
        console.log(currentY)
        set({ cursor: 'grabbing', currentY })
      },
      { domTarget: box.element }
    )
  })
})
</script>