Map coordinates while dragging

Locking axis example

If you want to map the coordinates of the translate property while dragging, you can use the coordinateTransform option. First, we’re going to add the lockAxis map:

<script setup lang="ts">
  import { type Coordinate } from "fluid-dnd";

  const list = ref([...Array(20).keys()]);
  const lockAxis = (coordinate: Coordinate) => {
    return {
      x: 0,
      y: coordinate.y
    };
  };
  const [ parent ] = useDragAndDrop(list, {
    coordinateTransform: [ lockAxis ]
  });
</script>

Preview

Multiple mappers example

You can also use multiple mappers, those will be applied sequentially, where the output of one mapping function becomes the input of the next.

In this example, we’re going to add the gridTranslate map the coordinate to snap to a given grid size:

<script setup lang="ts">
  //...
  const gridTranslate = ({ x, y }: Coordinate) => {
    const gridSize = 25.78;
    return {
      x: Math.ceil(x / gridSize) * gridSize,
      y: Math.ceil(y / gridSize) * gridSize
    };
  };
  //...

const [ parent ] = useDragAndDrop(list, {
    coordinateTransform: [lockAxis, gridTranslate]
  });
</script>