React DND - 在鼠标移动时获取拖动元素的坐标

Question

我有一个图像，当我拖动时我也想实现旋转。我想到的解决方案是使用 React DnD 获取拖动图像位置的 xy 坐标并计算原始图像位置之间的差异。这种差异的值将构成进行旋转的基础。

我查看了 ReactDnD 库上的示例，发现 DragSource 规范可以访问 Monitor 变量。这个监控变量可以访问像getInitialClientOffset(). 当我实现console.log()这个值的a 时，它会显示我释放鼠标时的最后一个坐标集。

使用这个库，有没有一种简单的方法可以在我移动鼠标时获取拖动元素的当前位置？

import React from 'react'
import { DragSource } from 'react-dnd'

// Drag sources and drop targets only interact
// if they have the same string type.
// You want to keep types in a separate file with
// the rest of your app's constants.
const Types = {
  CARD: 'card',
}

/**
 * Specifies the drag source contract.
 * Only `beginDrag` function is required.
 */
const cardSource = {
  beginDrag(props,monitor,component) {
    // Return the data describing the dragged item
    const clientOffset = monitor.getSourceClientOffset();
    const item = { id: props.id }
    console.log(clientOffset);
    return item
  },

  isDragging(props, monitor){
    console.log(monitor.getClientOffset())
  },

  endDrag(props, monitor, component) {
    if (!monitor.didDrop()) {
      return
    }

    // When dropped on a compatible target, do something
    const item = monitor.getItem()
    const dropResult = monitor.getDropResult()
    console.log(item,dropResult)
    //CardActions.moveCardToList(item.id, dropResult.listId)
  },
}

/**
 * Specifies which props to inject into your component.
 */
function collect(connect, monitor) {
  return {
    // Call this function inside render()
    // to let React DnD handle the drag events:
    connectDragSource: connect.dragSource(),
    // You can ask the monitor about the current drag state:
    isDragging: monitor.isDragging(),
  }
}

function Card(props) {
  // Your component receives its own props as usual
  const { id } = props

  // These two props are injected by React DnD,
  // as defined by your `collect` function above:
  const { isDragging, connectDragSource } = props



  return connectDragSource(
    <div>
      I am a draggable card number {id}
      {isDragging && ' (and I am being dragged now)'}
    </div>,
  )
}

// Export the wrapped version
export default DragSource(Types.CARD, cardSource, collect)(Card)

Answer 1

据我所知，自定义拖动层存在严重的性能问题。最好直接订阅底层API（官方文档严重缺乏，但是可以通过阅读拖动层源码得到这些信息）：

const dragDropManager = useDragDropManager();
const monitor = dragDropManager.getMonitor();

React.useEffect(() => monitor.subscribeToOffsetChange(() => {
  const offset = monitor.getClientOffset();
  // do stuff like setState, though consider directly updating style through refs for performance
}), [monitor]);

您还可以使用一些基于拖动状态的标志，仅在需要时进行订阅（简单的isDragging && monitor.subscribe...加上依赖项数组就可以解决问题）。

Answer 2

我在事后以这种方式发布，但如果有人正在寻找这个答案，react-dnd 的方法是使用他们所谓的拖动层 - 它为您提供了一种使用自定义组件的方法拖动时显示。

他们在这里有一个完整的示例： https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/02-drag-around/custom-drag-layer ?from-embed =&文件=/src/CustomDragLayer.jsx

另外，在文档中您想查看 useDragLayer 和 DragLayerMonitor

Answer 3

您可以使用

ReactDOM.findDOMNode(component).getBoundingClientRect();

参考：https: //reactjs.org/docs/react-dom.html#finddomnode

或者只是对您的组件实例进行引用getBoundingClientRect()并在事件中获取该实例onmousemove。