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.
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
Esta etapa é totalmente opcional; estamos usando bootstrap para projetar o layout básico e componentes úteis da UI.
npm install bootstrap --legacy-peer-deps
Em seguida, crie um novo components/ e crie CanvasDrag.js
import React from 'react'
function CanvasDrag() {
return (
<div></div>
)
}
export default CanvasDrag
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;
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;
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