перетащите изображение в прямоугольник

Question

Я хотел показать все 5 изображений в области вокруг прямоугольника и сделать их перетаскиваемыми с помощью React-Draggable, но изображения не отображаются, даже если я отображаю состояние и пытаюсь передать URL-адрес в компонент изображений . где я ошибаюсь? как показать изображения вокруг холста?

codeandbox

import React, { Component } from "react";
import Draggable from "react-draggable";
import axios from "axios";
import "./App.css";
import Images from "./Images";
export default class App extends Component {
  constructor(props) {
    super(props);
    this.toggleAspect = this.toggleAspect.bind(this);
    this.state = {
      activeDrags: 0,
      deltaPosition: {
        x: 0,
        y: 0
      },
      controlledPosition: {
        x: -400,
        y: 200
      },
      urlImages: null,
      toggleDefault: true
    };
  }

  async componentDidMount() {
    const res = await axios.get("https://picsum.photos/v2/list?limit=5");
    this.setState({ urlImages: res.data });
    this.state.urlImages.map(data =>
      console.log("urlImage\t" + data.download_url)
    );
  }

  toggleAspect() {
    const currentState = this.state.toggleDefault;
    this.setState({ toggleDefault: !currentState });
  }
  handleDrag = (e, ui) => {
    const { x, y } = this.state.deltaPosition;
    this.setState({
      deltaPosition: {
        x: x + ui.deltaX,
        y: y + ui.deltaY
      }
    });
  };

  onStart = () => {
    this.setState({ activeDrags: ++this.state.activeDrags });
  };

  onStop = () => {
    this.setState({ activeDrags: --this.state.activeDrags });
  };

  // For controlled component
  adjustXPos = e => {
    e.preventDefault();
    e.stopPropagation();
    const { x, y } = this.state.controlledPosition;
    this.setState({ controlledPosition: { x: x - 10, y } });
  };

  adjustYPos = e => {
    e.preventDefault();
    e.stopPropagation();
    const { controlledPosition } = this.state;
    const { x, y } = controlledPosition;
    this.setState({ controlledPosition: { x, y: y - 10 } });
  };

  onControlledDrag = (e, position) => {
    const { x, y } = position;
    this.setState({ controlledPosition: { x, y } });
  };

  onControlledDragStop = (e, position) => {
    this.onControlledDrag(e, position);
    this.onStop();
  };

  render() {
    const dragHandlers = { onStart: this.onStart, onStop: this.onStop };
    const { deltaPosition, controlledPosition } = this.state;
    return (
      <div>
        <h1>React Draggable</h1>
        <p>Active DragHandlers: {this.state.activeDrags}</p>
        <p>
          <a href="https://github.com/STRML/react-draggable/blob/master/example/example.js">
            Demo Source
          </a>
        </p>
        <button onClick={this.toggleAspect}>Toggle Aspect Ratio</button>
        <canvas
          className={` ${
            this.state.toggleDefault ? "canvasFrame" : "canvasFrame-2"
          }`}
        />
        <Draggable>
          {/* urlImages.map((data)=>  problem
            <Images
            url={data.download_url}
            />
          ) */}
          <div
            className="box"
            style={{ position: "absolute", bottom: "100px", right: "100px" }}
          >
            I already have an absolute position.
          </div>
        </Draggable>
      </div>
    );
  }
}

Answer 1

Требуется несколько изменений tldr; вот рабочая ссылка,

https://codesandbox.io/s/unruffled-bogdan-x98ff

Изображения были немного изменены, одна вещь react-draggable упоминает в своей документации, что компоненты должны принимать несколько переданные свойства. ссылка на документы

Пример компонента «Изображения» для иллюстрации.

import React from "react";

const Images = ({
  download_url,
  className,
  style,
  onMouseDown,
  onMouseUp,
  onTouchStart,
  onTouchEnd
}) => {
  return (
    <img
      onMouseDown={onMouseDown}
      onMouseUp={onMouseUp}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
      className={className}
      style={style}
      src={download_url}
      alt="photos"
      width="50px"
      height="50px"
    />
  );
};
export default Images;

Я сделал его слишком подробным вместо того, чтобы расширять, чтобы вы могли видеть требуемые свойства.

В приложении. js Я внес эти изменения, сначала в настройках состояния здесь

  async componentDidMount() {
    const res = await axios.get("https://picsum.photos/v2/list?limit=5");
    const urlImages = [...res.data];
    this.setState({ urlImages });
  }

И собственно рендеринг изображений

    {urlImages.map(data => (
      <Draggable>
        <Images key={data.id} download_url={data.download_url} />
      </Draggable>
    ))}

Это получает изображения на странице, и их можно перетаскивать, я лично никогда не использовал react-draggable, поэтому я уверен, что есть некоторые улучшения, которые можно сделать, чтобы сделать их более плавными, и т. д. c. Однако мы надеемся, что это укажет вам правильное направление.