React DND - получить координаты перетаскиваемого элемента при движении мыши

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

Вы можете использовать

ReactDOM.findDOMNode(component).getBoundingClientRect();

Ref: https://reactjs.org/docs/react-dom.html#finddomnode

Или просто сделать ref для вашего экземпляра компонента и получить getBoundingClientRect() для экземпляра в пределахonmousemove событие.