React-dnd: 놓기 대상 컨테이너를 기준으로 떨어뜨린 항목의 좌표를 얻으려면 어떻게 해야 합니까?

getClientOffset 가 뷰포트에 상대적인 위치를 반환하는 것 같습니다. 따라서 놓기 대상에서 오프셋을 찾기만 하면 됩니다. 놓기 대상에 비해 편리한 방법을 사용하는 것이 여전히 가치가 있다고 생각하십니까?

예, 대칭을 위해 이것을 가질 수 있다고 생각합니다. 지금은 findDOMNode(component).getBoundingClientRect() 만 사용할 수 있지만 더 많은 사람들이 지원을 음성으로 알려준다면 이 기능을 추가하는 것이 좋습니다. 이것을 열어두고 다른 사람들이 말하는 것을 봅시다.

저도 이런게 있었으면 합니다. 놓기 대상의 경계 직사각형/좌표를 가져와야 하므로 대상 위에 마우스를 올려 놓으면 놓기 대상 내부의 왼쪽, 오른쪽, 위쪽 또는 아래쪽에 있는지 계산할 수 있습니다.

상대 좌표는 다른 사용 사례에 유용할 수 있습니다. Trello와 유사한 앱의 경우 목록 위로 카드를 드래그하면 드롭 영역의 하단 근처에 마우스를 가져가면 목록이 하단으로 스크롤되고 상단 근처에 마우스를 가져가면 위로 스크롤됩니다.

사용자 공간에서 구현하기가 쉽지 않습니다.

또한 경계 사각형에 액세스하면 브라우저에서 리플로우가 트리거되고 다소 비용이 든다는 것을 읽은 기억이 어렴풋이 있습니다. 이것이 여전히 사실인지 확실하지 않습니다.

항목이 이동했는지 알 수 없기 때문에 실제로 getBoundingClientRect 액세스하지 않고 이 작업을 수행할 수 있는 방법이 없다고 생각합니다.

Trello와 유사한 앱의 경우 목록 위로 카드를 드래그하면 드롭 영역의 하단 근처에 마우스를 가져가면 목록이 하단으로 스크롤되고 상단 근처에 마우스를 가져가면 위로 스크롤됩니다.

좋은 사용 사례입니다.

성능 패널티는 실제로 중요하며 React DnD에 추가되었지만 앱에서 사용하지 않으면 낭비됩니다. 따라서 나는 이것을 React DnD에 추가하고 싶지 않습니다.

사용자 영역에서 구현하기 쉽고 getBoundingClientRect 호출을 조절하거나 관련 스크롤 코드를 애니메이션 프레임에 넣는 것과 같은 작업을 수행할 수 있습니다.

저는 분류 가능한 스트레스 테스트에 "예를 들어" "하단에 마우스를 올려 놓을 때 스크롤"을 추가할 수 있습니다. 여기에는 hover 만 수신하고 애니메이션 프레임 내에서 스크롤하는 컨테이너 수준에서 다른 놓기 대상을 추가하는 것이 포함됩니다.

그러나 위에서 설명한 이유로 DOM 좌표 메서드를 React DnD에 추가하지 않겠습니다.

@gaearon 일반화된 솔루션에 관심이 있습니다. 어떻게 우리가 사용할 수있는 react-dnd-html5-backend 대신 getBoundingClientRect 직접?

DropTargetMonitor 함수 getInitialSourceClientOffset 및 getSourceClientOffset 를 내 onDrop 이벤트 내의 콜백 함수에 전달하여 이 문제를 해결했습니다. 이렇게 하면 내 콜백 함수가 뷰 포트와 관련된 올바른 좌표를 계산할 수 있습니다.

// some code before...

const [, dropRef] = useDrop({
    accept: 'STICKY',
    drop(item, monitor) {
      move(
        item.id,
        monitor.getInitialSourceClientOffset(),
        monitor.getSourceClientOffset()
      );
    },
  });

// I'm updating my state with npm immer (immutable helper) throuthg the produce function...

const move = (id, initialPosition, finalPosition) => {
    setList(
      produce(list, draft => {
        list.map(item => {
          if (item.id === id) {
            item.position = getCorrectDroppedOffsetValue(
              initialPosition,
              finalPosition
            );
          }
          return item;
        });
      })
    );
  };

// and finally, my getCorrectDroppedOffsetValue function
const getCorrectDroppedOffsetValue = (initialPosition, finalPosition) => {
    // get the container (view port) position by react ref...
    const dropTargetPosition = ref.current.getBoundingClientRect();

    const { y: finalY, x: finalX } = finalPosition;
    const { y: initialY, x: initialX } = initialPosition;

    // calculate the correct position removing the viewport position.
   // finalY > initialY, I'm dragging down, otherwise, dragging up
    const newYposition =
      finalY > initialY
        ? initialY + (finalY - initialY) - dropTargetPosition.top
        : initialY - (initialY - finalY) - dropTargetPosition.top;

    const newXposition =
      finalX > initialX
        ? initialX + (finalX - initialX) - dropTargetPosition.left
        : initialX - (initialX - finalX) - dropTargetPosition.left;

    return {
      x: newXposition,
      y: newYposition,
    };
  };

findDOMNode 는 기능 구성 요소와 함께 작동하지 않으며 useDrop#drop 는 component 를 전달하지 않습니다. 이제 내 구성 요소의 ref 를 얻으려면 별도로 저장하고 수동으로 드롭 커넥터를 호출하여 전달합니다. 이 작업을 수행하는 더 간결한 방법이 있습니까?

function useCustomDrop(onDrop: (info: unknown, xy: Point) => void) {

    const ref = useRef<Element>();

    const [, dropTarget] = useDrop<any, void, unknown>({
        accept: 'item-type',
        drop(item, monitor) {
            const offset = monitor.getSourceClientOffset();
            if (offset && ref.current) {
                const dropTargetXy = ref.current.getBoundingClientRect();
                onDrop(item.data, {
                    x: offset.x - dropTargetXy.left,
                    y: offset.y - dropTargetXy.top,
                });
            }
        }
    });

    return (elem) => {
        ref.current = elem;
        dropTarget(ref);
    };
}

@quanganhtran 공유하고 싶은 완전한 코드 샘플이 있습니까?

@dendrochronology

인위적인 예: https://codesandbox.io/s/elastic-liskov-00ldf

API는 ref 직접 저장할 필요가 없을 때 더 좋습니다( useGlobalDrop vs useLocalDrop ). 이제에만 경우 ref 내가 생각하는, react-dnd 이미 얻을 ~ 다에 부착되지 monitor 객체 ~ 어딘가에 (접근 drop , 내가 더이 의견), 그것은 이것을 해결할 것입니다.

이 솔루션은 특히 브라우저를 확대하거나 장치 해상도를 변경할 때 신뢰할 수 없습니다. 어떤 생각?

나는 같은 질문이 있습니다 @ sepehr09

구글링 몇 번 하다가 그냥 지나쳤는데... 원래 질문에 대한 업데이트가 있습니까? (드롭 대상을 기준으로 드롭된 항목의 x/y 획득)

나는 이것을 필요로하는 사람들의 목록에 합류 할 것이라고 생각합니다. 도움이 필요하세요?

이 기능은 매우 필요하며 라이브러리에 추가해야 한다고 생각합니다. 바로 지금, 작업한 사람이 있습니다. 도와주세요!