如何使用 react-draggable 将拖动的组件重置到其原始位置？

Question

我尝试在我的应用程序中实现一个功能，允许用户重置他拖动的所有组件以重置到它们的原始位置。

我假设这个功能存在于 react-draggable 因为这个关闭和发布的问题："Allow reset of dragging position" (https://github.com/idanen/react-draggable/issues/7). However I did not find any hint in the documentation (https://www.npmjs.com/package/react-draggable).

在Whosebug中有一个相同内容的问题，但已被删除()。

感谢您的帮助:-)

Answer 1

GitHub 上的引用问题引用了 commit。查看此提交中所做的更改后，我发现 resetState 回调添加到 useDraggable 挂钩。在提交的另一个地方，我发现对测试文件的更改显示了钩子的用法。

function Consumer(props) {
    const {
      targetRef,
      handleRef,
      getTargetProps,
      resetState,
      delta,
      dragging
    } = useDraggable(props);
    const { style = defaultStyle } = props;
    return (
      <main
        className='container'
        ref={targetRef}
        data-testid='main'
        style={style}
        {...getTargetProps()}
      >
        {dragging && <span>Dragging to:</span>}
        <output>
          {delta.x}, {delta.y}
        </output>
        <button className='handle' ref={handleRef}>
          handle
        </button>
        <button onClick={resetState}>reset</button>
      </main>
    );
  }

钩子returns一组回调，包括这个回调，可以用来重置draggable的状态。

Answer 2

您可以非常随意地执行此操作。可能还有另一种更安全地设置状态的方法，但我没有深入研究它。

import React from 'react';

export default class  extends Component {
    constructor(props) {
        super(props);
        this.draggableEntity = React.createRef();
    }

    resetDraggable() {
        try {
            this.draggableEntity.current.state.x = 0;
            this.draggableEntity.current.state.y = 0;
        } catch (err) {
            // Fail silently
        }
    
    }
    
    render() {
        return (
            <Draggable 
            ref={this.draggableEntity}
            >
               <img onClick={(e) => {this.resetDraggable()}}></img>
            </Draggable>
        )
    }
}

Answer 3

我希望组件在掉落时重置回其原始位置。

如果组件被拖动，我会使用挂钩进行监控，当它为假时重置位置，否则它将是未定义的。

export default function DraggableComponent(props: any) {
    const {label} = props
    const [isDragging, setIsDragging] = useState<boolean>(false)

    const handleStart = (event: any, info: DraggableData) => {
         setIsDragging(true)
    }
    const handleStop = (event: any, info: DraggableData) => {
        setIsDragging(false)
    }
    return (
        <Draggable
          onStart={handleStart}
          onStop={handleStop}
          position={!isDragging? { x: 0, y: 0 } : undefined}
        >
          <Item>
             {label}
          </Item>
        </Draggable>
       )
 }

如何使用 react-draggable 将拖动的组件重置到其原始位置？

How can I reset a dragged component to its original position with react-draggable?

reactjs

reset

react-dnd