Como criar um elemento de tela arrastável no React

Um elemento de tela arrastável é um elemento de tela em HTML que pode ser arrastado e solto na janela do navegador. Isso pode ser útil para criar aplicativos interativos, como ferramentas de desenho, editores de imagens e simulações visuais.

Neste tutorial, aprenderemos como criar um elemento de tela arrastável em React js usando métodos de tela JavaScript e componente de função.

Índice

• Etapa 1: construir o projeto React
• Etapa 2: instalar a biblioteca Bootstrap
• Etapa 3: Criar componente de função
• Etapa 4: construir o componente arrastável do Canvas
• Etapa 5: atualizar o arquivo App Js
• Etapa 6: iniciar o servidor React

Etapa 1: Criar projeto React

Você configurou o Node e o npm em seu sistema; ele permite que você crie um novo aplicativo React.

Para instalar o framework React, você deve abrir o prompt de comando, adicionar o comando e executar o comando abaixo.

npx create-react-app my-react-app

Agora, navegue até a pasta do projeto:

cd my-react-app

Etapa 2: instalar a biblioteca Bootstrap

Esta etapa é totalmente opcional; estamos usando bootstrap para projetar o layout básico e componentes úteis da UI.

npm install bootstrap --legacy-peer-deps

Etapa 3: Criar componente de função

Em seguida, crie um novo components/ e crie CanvasDrag.js

import React from 'react'
function CanvasDrag() {
  return (
    <div></div>
  )
}
export default CanvasDrag

Etapa 4: construir o componente arrastável do Canvas

O código a seguir orienta sobre: ​​Como iniciar e definir o contexto da tela, atribuir dimensões dinâmicas e desenhar e arrastar elementos da tela.

Você precisa abrir o arquivo components/CanvasDrag.js.

import React, { useRef, useEffect } from "react";
function CanvasDrag() {
  const canvas = useRef();
  let getCtx = null;
  const canBoxes = [
    { x: 190, y: 250, w: 120, h: 70 },
    { x: 110, y: 115, w: 100, h: 70 },
  ];
  let isMoveDown = false;
  let targetCanvas = null;
  let startX = null;
  let startY = null;
  useEffect(() => {
    const canvasDimensions = canvas.current;
    canvasDimensions.width = canvasDimensions.clientWidth;
    canvasDimensions.height = canvasDimensions.clientHeight;
    getCtx = canvasDimensions.getContext("2d");
  }, []);
  useEffect(() => {
    canvasDraw();
  }, []);
  const canvasDraw = () => {
    getCtx.clearRect(
      0,
      0,
      canvas.current.clientWidth,
      canvas.current.clientHeight,
    );
    canBoxes.map((info) => fillCanvas(info));
  };
  const fillCanvas = (info, style = {}) => {
    const { x, y, w, h } = info;
    const { backgroundColor = "#D75755" } = style;
    getCtx.beginPath();
    getCtx.fillStyle = backgroundColor;
    getCtx.fillRect(x, y, w, h);
  };
  const moveableItem = (x, y) => {
    let isCanvasTarget = null;
    for (let i = 0; i < canBoxes.length; i++) {
      const block = canBoxes[i];
      if (
        x >= block.x &&
        x <= block.x + block.w &&
        y >= block.y &&
        y <= block.y + block.h
      ) {
        targetCanvas = block;
        isCanvasTarget = true;
        break;
      }
    }
    return isCanvasTarget;
  };
  const onMouseDown = (e) => {
    startX = parseInt(e.nativeEvent.offsetX - canvas.current.clientLeft);
    startY = parseInt(e.nativeEvent.offsetY - canvas.current.clientTop);
    isMoveDown = moveableItem(startX, startY);
  };
  const onMouseMove = (e) => {
    if (!isMoveDown) return;
    const mouseX = parseInt(e.nativeEvent.offsetX - canvas.current.clientLeft);
    const mouseY = parseInt(e.nativeEvent.offsetY - canvas.current.clientTop);
    const mouseStartX = mouseX - startX;
    const mouseStartY = mouseY - startY;
    startX = mouseX;
    startY = mouseY;
    targetCanvas.x += mouseStartX;
    targetCanvas.y += mouseStartY;
    canvasDraw();
  };
  const onMouseUp = (e) => {
    targetCanvas = null;
    isMoveDown = false;
  };
  const onMouseOut = (e) => {
    onMouseUp(e);
  };
  return (
    <div>
      <canvas
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
        onMouseOut={onMouseOut}
        ref={canvas}
      ></canvas>
    </div>
  );
}
export default CanvasDrag;

Etapa 5: atualizar o arquivo App Js

O arquivo App.js é o único responsável por criar a estrutura e o comportamento dos componentes do nosso aplicativo React.

É por isso que precisamos registrar o componente criado anteriormente no arquivo App.js.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import CanvasDrag from "./components/CanvasDrag";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Canvas Draggable Shapes Example</h2>
      <CanvasDrag />
    </div>
  );
}
export default App;

Etapa 6: iniciar o servidor React

Navegue até o console, digite o comando abaixo e pressione Enter para executar o aplicativo.

npm start

O comando acima inicia o aplicativo no navegador:

http://localhost:3000