0

when I drag the button from the div on left, the target(drop) div, the button didn't stay where it was dropped and jump to somewhere near the top. It does work fine when I drag within the same div, the position is off only when I drag from the one from left. Like this:

enter image description here

this is the piece of code that deal with it:

  const [, drop] = useDrop(
    () => ({
      accept: ItemTypes.BOX,
      drop(item, monitor) {
        const delta = monitor.getDifferenceFromInitialOffset();
        let left = Math.round(item.left + delta.x);
        let top = Math.round(item.top + delta.y);
        moveBox(item, left, top);
        return undefined;
      }
    }),
    [moveBox]
  );

this is the full code. How do I calculate this properly? How do I fix this?

Jack
  • 16,276
  • 55
  • 159
  • 284

1 Answers1

0

boxes is empty. you call and insert empty "boxes" in "moveBox = useCallback". so function indexOfObject return -1.

  const moveBox = (
    (item, left, top) => {
      const boxes = [{'id' : item.id, 'title' : item.title } ];
      const i = indexOfObject(boxes, item.id);
      setBoxes(
        update(boxes, {
          [i]: { $merge: { left, top } }
        })
      );
    }
  );

AND to be placed mouse position, use style "position: fix" whitout "translate3d". (ref 'transform3d' not working with position: fixed children)

sym
  • 36
  • 3
  • I do handle the boxes in the drop target div so it isn't empty, see [here](https://codesandbox.io/s/awesome-euclid-e7lt4?file=/src/FormContainer.jsx) I use `position:fix` and removed `translate3d` but it didn't solve the issue, in made the button drag to somewhere else than the mouse position – Jack Jun 26 '21 at 15:00