Question

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

我看了看ReactDnD库上的示例，发现DragSource规范可以访问Monitor变量。此监视器变量可以访问诸如getInitialClientOffset()之类的方法。当我实现此值的console.log()时，它将向我显示释放鼠标时的最后一个坐标集。

使用该库，是否有一种简单的方法来获取我拖动鼠标时所拖动元素的当前位置？

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

useDrop钩子有一个<group name="student_id" isStartNewPage="true"> <groupExpression><![CDATA[$F{student_id}]]></groupExpression> </group>方法，该方法可以完成您想要的操作。当您将鼠标悬停在放置目标上时，它将反复触发。

Answer 3

您可以使用

ReactDOM.findDOMNode(component).getBoundingClientRect();

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

或者仅使a ref进入您的组件实例，并在getBoundingClientRect()事件中获得该实例的onmousemove。

Answer 4

据我了解，您需要通过HTML5Backend获得当前拖动元素的偏移量，但是如果您使用MouseBackend，则可以轻松获取坐标。据我所知，您可以通过无法获取HTML5Backend，但是如果使用MouseBackend，则可以轻松获取坐标。

https://github.com/zyzo/react-dnd-mouse-backend

查看带有预览的示例

Answer 5

我在事后发布了这种方式，但是如果有人在寻找这个答案，那么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=&file=/src/CustomDragLayer.jsx

也在文档中您还想要查看useDragLayer和DragLayerMonitor

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

5 个答案: