React-dnd: monitor.getClientOffset을 DropTarget에 연결해도 소품이 새로 고쳐지지 않습니다.

오, 좋은 지적입니다. 맞습니다. 저는이 사용법을 예상하지 못했습니다. 현재 클라이언트 오프셋 추적을 선택하는 유일한 방법은 DragLayer 입니다. 그렇지 않으면 성능상의 이유로 _drop 대상 자체 _와 관련된 것이 변경된 경우에만 props를 업데이트합니다.

API 문제라고 말하고 몇 가지 해결책이있을 수 있습니다.

• getClientOffset() 및 collect 함수 내에서 유사한 메소드에 접근하는 것을 금지하고 대신 DragLayer 를 사용하도록 지시하십시오 (쉽지만 멍청함).
• 이 경우 사용자가 오프셋을 추적하고 오프셋 변경을 구독하기를 원하는지 자동으로 파악합니다 (더 어렵지만 일관성이 있음).

나는 두 번째 옵션을하는 PR을 받아 들일 것이라고 생각한다. DragLayer 구현을 확인하여 오프셋 변경을 구독하는 방법을 확인할 수 있습니다.

두 번째 옵션을 살펴 보았지만 collect가 함수이므로 까다롭기 때문에 어떤 모니터 함수가 호출 될 수 있는지 알아내는 것이 불가능합니다.

내 사용 사례는 위치에 스냅 된 위젯을 드래그하여 상대적으로 복잡한 방식으로 다른 위젯을 대체 할 수 있습니다 (Android에서 프로그램 아이콘을 드래그하는 것을 생각해보십시오). 드래그 자체는 HTML5 스냅 샷으로 완벽하게 괜찮은 반면, 정확한 호버 위치에 따라 자체적으로 재정렬해야하는 것은 실제로 대상입니다. 대상 구성 요소의 상태를 업데이트하는 대상 사양의 호버로 수행 할 수 있습니다. 그래서 지금은 이것을두고 해결하겠습니다. 놀라운 라이브러리에 감사드립니다. 나는 아주 몇 시간의 일로 괜찮은 일을하고있다.

지금은 열어 두겠습니다. # 172와 동일합니다. canDrop 또는 수집 기능에서 델타를 사용하는 사람들을 예상하지 못했습니다. 이 문제를 당장 고치지는 않겠지 만 한 달 정도 지나면 해결 될 것입니다.

나는 또한이 문제에 부딪쳤다. 클라이언트가 DropTarget 사양에 플래그를 전달하여 오프셋 변경 사항을 구독하도록 허용하는 것에 대해 어떻게 생각하십니까? 사용자에게는 또 하나의 "함정"이지만 오프셋을 수동으로 구독 / 구독 취소하는 것보다 간단합니다.

RxJS-DOM을 사용하여 요소의 드래그 오버 이벤트를 관찰하고 마우스 좌표로 상태를 업데이트 할 수 없습니까? 아마도 Hacky 솔루션.

  componentDidMount() {
    this._events.dragOver = DOM.fromEvent(findDOMNode(this.refs.grid), 'dragover')
                            .throttle(200)
                            .subscribe(this.getMouseCoords)
  }

나는 결국 모니터를 잡고 DragLayer와 같은 오프셋 변경 사항을 구독했습니다. 나는 또한 장소에서 내부 레지스트리를 두드리는 결과를 얻었습니다. 나는 내가하고 싶은 것이 _too_ 비정상적이라고 생각하지 않으므로 IMO는 간단한 API 변경으로 해결할 수 있습니다.

이것에서 나온 것이 있습니까? 사용자 정의 드래그 레이어가 아닌 DropTarget에서 호버 위치에 액세스 할 수있을 때 DropTarget의 구조를 변경하는 것이 더 쉽기 때문에 사용자 정의 드래그 레이어가 아닌 DropTarget에서 클라이언트 오프셋을 모니터링하고 싶습니다.

+1 @jchristman이하 려는 일을 정확히하고 싶습니다.

+1. 이것에 부딪 히고 getClientOffset ()이 canDrop ()에서 잘 작동하는 이유를 이해하려고 많은 시간을 낭비하고 있습니다-반복적으로 호출됩니다 ...-그러나 우리가있는 항목에 대한 '어디'제어로 전달할 방법이 없습니다. 나는 단지 "위"가 아니라 트리 노드의 위와 아래에 삽입 할 수 있어야합니다. canDrop ()은 노드가 가지고있는 많은 "유형"의 드롭 중 어떤 것을 구성 요소에 실제로 알려서 컨트롤이 그에 따라 다시 표시되도록 할 수있는 방법이 없습니다. canDrop에서 소품을 변경하면 오류가 발생했습니다. 끌어서 놓기 작업 중에는 onMouseMove 구독이 작동하지 않습니다. 이것은 지금까지 엄청난 시간 낭비였습니다 ... 어떤 도움을 주시면 감사하겠습니다.

@ibash , 문제를 해결하기 위해 한 요점을 게시 해 주시겠습니까?

호버 사용으로 전환하면 마침내 나에게 도움이되었습니다.

`hover : (props : MyProps, 모니터 : DropTargetMonitor, 구성 요소 : ReportItemRow) => {
if (구성 요소! = null) {
const clientOffset = monitor.getClientOffset ();

        // Is the dragging node dragged above/below us as opposed to "on" us?

        const elementRect = document.elementFromPoint(clientOffset.x, clientOffset.y).getBoundingClientRect();

        const percentageY = (clientOffset.y - elementRect.top) / elementRect.height;

        // Divide the box up into .25 .5 .25
        const insertDragAndDropMagnetPercent = .25;

        if (insertDragAndDropMagnetPercent >= percentageY) {
            component.setState({ dropTarget: "above" });
        }
        else if (1 - insertDragAndDropMagnetPercent >= percentageY) {
            component.setState({ dropTarget: "inside" });
        }
        else {
            component.setState({ dropTarget: "below" });
        }
    }
},`

@ noah79 , 그 동안 무언가가 올 때까지 기다리는 동안 여러 드롭 타겟을 만들고 트리 노드 아래에 두어 문제를 해결할 수 있습니다. 다음과 같이 :

         _____| <-- drop div1 (above treenode1/below top of list)
treenode1_____| <-- drop div2 (on treenode1)
         _____| <-- drop div3 (below treenode1/above treenode2)
treenode2_____| <-- drop div4 (on treenode 2)
         _____| <-- drop div5 (below treenode2/above bottom of list)

결국 2n + 1 드롭 대상이됩니다. 여기서 n은 목록의 요소 수입니다. 그런 다음 마우스를 올려 놓은 div에 따라 트리 목록의 모양을 변경할 수 있습니다. 지금은 getClientOffset ()에 액세스 할 수없는 문제를 해결하기 위해 이와 매우 유사한 작업을 수행했지만 성능에 영향을주지 않았습니다. 각 드롭 div의 높이는 treenode1 라인 높이의 1/2이어야하며 첫 번째 드롭 div는 첫 번째 라인보다 높은 treenode1 라인 높이의 1/4에 위치해야합니다. 즉, CSS는 다음과 같아야합니다.

.dropdiv-container {
    position: absolute;
    top: -0.25em; /* If the top of this container is aligned with the top of the treenode list initially */
}
.dropdiv {
    height: 0.5em; /* If the height of treenode1 line is 1em with no padding */
}

<div className='dropdiv-container'>
    { renderDropTargets(2 * listLength + 1) }
</div>

말이 돼?

이 문제를 해결 한 방법의 요점은 다음과 같습니다. 트릭은
react-dnd 내부 및 글로벌 모니터를 직접 사용하십시오. 보세요
DragDropMonitor.js 소스를 사용하여 사용 가능한 메서드에 대한 아이디어를 얻으십시오.
참조 : https://github.com/gaearon/dnd-core/blob/master/src/DragDropMonitor.js

당신은 커피 스크립트를 용서해야 할 것입니다 :)

  # in the component being dragged, get access to the dragDropManager by adding
  # it to the contextTypes
  #
  # dragDropManager is an instance of this:
  # https://github.com/gaearon/dnd-core/blob/master/src/DragDropManager.js

  <strong i="11">@contextTypes</strong>: {
    dragDropManager: React.PropTypes.object
  }

  # because we can receive events after the component is unmounted, we need to
  # keep track of whether the component is mounted manually.
  #
  # <strong i="12">@_monitor</strong> is what lets us access all the nice internal state - it is an instance of this:
  # https://github.com/gaearon/dnd-core/blob/master/src/DragDropMonitor.js

  componentWillMount: () =>
    <strong i="13">@_isMounted</strong> = true
    <strong i="14">@_monitor</strong> = @context.dragDropManager.getMonitor()

    <strong i="15">@_unsubscribeToStateChange</strong> = @_monitor.subscribeToStateChange(@_onStateChange)
    <strong i="16">@_unsubscribeToOffsetChange</strong> = @_monitor.subscribeToOffsetChange(@_onOffsetChange)

  componentWillUnmount: () =>
    <strong i="17">@_isMounted</strong> = false
    <strong i="18">@_monitor</strong> = null

    @_unsubscribeToStateChange()
    @_unsubscribeToOffsetChange()

  # we can access dragging / dropping state by accessing the monitor 

  _onStateChange: () =>
    return unless <strong i="19">@_isMounted</strong>

    # When we stop dragging reset the counter state and hide all cursors.
    if <strong i="20">@_previousIsDragging</strong> && !@_monitor.isDragging()
      console.log('no longer dragging')
    <strong i="21">@_previousIsDragging</strong> = @_monitor.isDragging()

  _onOffsetChange: () =>
    return unless <strong i="22">@_isMounted</strong>

    # mouse is the x/y coordinates
    mouse = @_monitor.getClientOffset()

    # item is the drag item
    item = @_monitor.getItem()

    # if you want to check if a dragged item is over a target, you need the
    # targetId -- in the DropTarget wrapper you can pass it in like:
    #
    #   (connect, monitor) ->
    #     {
    #       targetId: monitor.targetId,
    #       connectDropTarget: connect.dropTarget()
    #     }
    #
    # and then you can use it like below

    @_monitor.isOverTarget(@props.targetId))

이게 말이 돼? 그렇지 않다면 더 자세한 정보를 추가 할 수 있습니다

나는 또한 오늘 이것을 실행하고 몇 시간을 낭비했습니다. DropTarget-> The Collecting Function의 문서에 메모를 남기는 것은 어떻습니까? 그것은 적어도 좌절감을 위해 다른 사람들을 아끼지 않을 것입니다.

Btw. 이 문제에 대한 또 다른 추악한 해킹은 dropTarget.hover() 에서 _as state_ 좌표를 보내는 것입니다.

const dropTarget = {
    hover(props, monitor, component) {
        // HACK! Since there is an open bug in react-dnd, making it impossible
        // to get the current client offset through the collect function as the
        // user moves the mouse, we do this awful hack and set the state (!!)
        // on the component from here outside the component.
        component.setState({
            currentDragOffset: monitor.getClientOffset(),
        });
    },
    drop() { /* ... */ },
};

물론 setState의 남용을 피할 수있는 더 정확한 방법이 많이 있습니다. 그러나 적어도이 작은 해킹은 매우 압축되어 있으며이 문제가 결국 해결 될 때까지 작업을 수행 할 수 있습니다. 다른 구성 요소 및 / 또는 파일을 변경하지 않고 라이브러리 내부에 의존하지 않고 버그를 해킹 할 수 있습니다.

편집 : 이것은 기본적으로 noah79와 동일합니다. 저는 지금까지 그의 코드를 읽지 않았습니다.

드롭시 마우스 위치를 얻을 수있는 방법이 정말 없습니까? 내 대상 구성 요소는 그것에 대해 알 필요가 없으므로 setState 는 옵션이 아닙니다. redux 작업을 트리거하려면 좌표가 필요합니다.

내 마지막 메시지를 무시하십시오. 이제 drop 및 endDrag 가 서로 다른 두 기능이며 drop 내에서 커서 위치를 지정하는 것이 예상대로 작동한다는 것을 알았습니다. :)

내 테스트에서 react-dnd는 항목이 대상 위로 드래그되는 즉시 마우스 이동 이벤트를 사용합니다. html-backend가이 이벤트를 사용하지 않는 것이 가능하다면, 대상 컴포넌트는 isOver 속성이 true로 설정 될 때 조건부로 정상적인 mousemove 리스너를 dom에 배치 할 수 있습니다. 그 후이 청취자는 무언가를 드래그 할 때 정상적인 방식으로 마우스 위치를 선택할 수 있습니다. drag () 메서드에서 setState를 사용하여 일시적으로 작동하도록 설정했습니다. react는 렌더 전환 중간에 상태 설정에 대한 경고를 표시합니다.

이것도 저를 넘어 뜨 렸습니다. API 솔루션에 대한 +1 또는 적어도 FAQ에있는 항목.

이를 지원할 계획이 있습니까?
해킹없는 해결 방법에 대한 아이디어가 있습니다. hover 를 래핑하는 DropTarget 대한 래퍼를 만들어 수집 함수에 대한 다른 호출을 트리거하고 수집 함수가 새 값을 반환하면 다시 렌더링합니다. .

이 문제에 대해 +1합니다. 사용 사례는 서로 근접한 여러 드롭 대상이 있다는 것입니다. 호버링 할 때 적절한 드롭 대상이 강조 표시되지만 실제로는 마우스를 가져간 방향에 따라 낮은 대상에 드롭되는 것이 이상해 보입니다.

오프셋이 업데이트되지 않는 이유를 조사하는이 문제를 우연히 발견했는데, 여전히 해결 방법이 필요한 것 같습니다.
나는 @ jedwards1211 의 아이디어를 DropTarget 와 거의 동일한 인터페이스를 가지고 있지만, 수집 함수를 통해 쿼리 할 소품 목록 인 옵션에서 collectRapidly 를 허용하고 모든 호버 이벤트에 대해 전달합니다. 수집 함수에서 모든 소품을 무차별 적으로 전달하면 약간의 이상 함이 발생하고 connect 를 수집 자에게 전혀 전달할 수 없으므로 connectDropTarget "빠르게"쿼리하지 않도록 보호해야합니다.

따라서 DropTarget(types, target, collect) 대신 RapidFireDropTarget(types, target, collect, {collectRapidly: ['offset']}) . 여기서 offset 는 아마도 monitor.getOffset 함수 계열에서 값을받는 것입니다.

import React from 'react';
import {DropTarget} from 'react-dnd';
import pick from 'lodash/pick';

function RapidFireDropTarget(types, spec, collect, options={}) {
  let collectProps = {};
  const prevHover = spec.hover;
  const {collectRapidly = []} = options;

  const dummyConnect = {
    dropTarget: () => () => {
      throw new Error('Rapidly collected props cannot include results from `connect`');
    }
  };

  const WrappedComponent = Component => {
    return class extends React.Component {
      render() {
        return <Component {...this.props} {...collectProps} />;
      }
    };
  };

  spec.hover = (props, monitor, component) => {
    const allCollectProps = collect(dummyConnect, monitor);

    collectProps = pick(allCollectProps, collectRapidly);
    component.forceUpdate();

    if (prevHover instanceof Function) {
      prevHover(props, monitor, component);
    }
  }

  return (Component) => {
    return DropTarget(types, spec, collect, options)(WrappedComponent(Component));
  };
}

export default RapidFireDropTarget;

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 발생하지 않으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.