Untitled
unknown
plain_text
a year ago
1.9 kB
2
Indexable
Never
import React, { useState } from "react"; const ElectricalComponent = ({ type }) => { return ( <div style={{ width: "50px", height: "50px", backgroundColor: "gray", margin: "5px", cursor: "grab", }} draggable onDragStart={(e) => { e.dataTransfer.setData("text/plain", type); }} > {type} </div> ); }; const Canvas = () => { const [components, setComponents] = useState([]); const handleDrop = (e) => { e.preventDefault(); const type = e.dataTransfer.getData("text/plain"); const left = e.clientX; const top = e.clientY; const component = { type, left, top }; setComponents([...components, component]); }; const handleDragOver = (e) => { e.preventDefault(); }; return ( <div style={{ width: "600px", height: "400px", border: "1px solid black" }} onDrop={handleDrop} onDragOver={handleDragOver} > {components.map((component, index) => ( <div key={index} style={{ width: "50px", height: "50px", backgroundColor: "gray", position: "absolute", left: component.left, top: component.top, }} > {component.type} </div> ))} </div> ); }; const App = () => { return ( <div> <div style={{ width: "100%", height: "80px", backgroundColor: "lightgray", display: "flex", justifyContent: "center", alignItems: "center", }} > <ElectricalComponent type="Resistor" /> <ElectricalComponent type="Capacitor" /> <ElectricalComponent type="Inductor" /> </div> <Canvas /> </div> ); }; export default App;