Can't handle draggable element offsets with transform: translate

[sourav-mehra-lv]

Issue

The library seemingly can't handle draggable element offsets with transform: translate

I’ve run into an issue when adjusting the position of a draggable element. My use case is as follows:

• I use transform: translate to visually adjust the position of the draggable element, making sure the start of the element is positioned under the cursor when the drag starts, no matter where the user drags it from.
• While this visually updates the element’s position in the UI, the underlying drag logic continues to use the original position (before applying the transform styles), which causes a mismatch between the UI position and the droppable logic.

Is there a way to apply this offset to the underlying drag logic as well, so the logic uses the adjusted position, not the original one?

I’d appreciate any suggestions or guidance on how to handle this scenario.

What version of React are you using?

18.3.1

What version of @hello-pangea/dnd are you running?

16.6.0

What browser are you using?

Google Chrome (131.0.6778.205)

Demo

In the attached video, you'll see that once I start dragging the card, I adjust through CSS to be placed under the cursor. But when I drag it into the folders section, the droppable areas (greyed out folders) use the original position of the dragged element to calculate if the draggable file is over the droppable area (as seen when the greyed out folders become normal visually).

screen-recording-2024-12-23.mov

[marcuspx]

did you fix it? same problem I did something like that but I dont want to the transform is an issue

` const getDragStyle = (isDragging, draggableStyle) => {
if (!isDragging) return draggableStyle;

// Extraer la transformación actual
let transform = draggableStyle.transform || '';

// Configurar offset específico según el dispositivo
const getOffsetPercent = () => {
  switch (deviceType) {
    case 'mobile':
      return '-300px'; // Menor offset para móviles (el cursor suele estar más arriba)
    case 'tablet':
      return '-480px'; // Offset mediano para tablets
    default:
      return '-300px'; // Offset estándar para escritorio
  }
};

// Si hay una transformación, modificarla para ajustar la posición vertical
if (transform) {
  console.log(getOffsetPercent());
  return {
    ...draggableStyle,
    transform: transform.replace(/translate\((.+?)\)/, (match, coords) => {
      const [x, y] = coords.split(', ');
      // Ajuste responsivo basado en el tipo de dispositivo
      return `translate(${x}, calc(${y} - ${getOffsetPercent()}))`;
    }),
    touchAction: 'none', // Mejora la experiencia táctil
    zIndex: 9999,
  };
}

return {
  ...draggableStyle,
  touchAction: 'none',
  zIndex: 9999,
};

};`