App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import React from "react"; import DraggableList from "react-draggable-lists"; import img1 from "./assets/1.jpeg"; import img2 from "./assets/2.jpeg"; import img3 from "./assets/3.jpeg"; function App() { // Array of image paths const images = [img1, img2, img3]; return ( <div> <h1 style={{ textAlign: "center" }}>React Draggable Images</h1> <div style={{ width: 300, margin: "0 auto" }}> <DraggableList width={300} height={450} rowSize={1}> {images.map((src, index) => ( <div key={index} style={{ width: "100%", height: 200, // Set the height to make the image fully visible background: `url(${src}) no-repeat center center`, backgroundSize: "contain", // Ensure the image fits within the div border: "1px solid #ccc", borderRadius: "5px", // Optional: rounded corners boxSizing: "border-box", // Prevent border from affecting size }} > <p style={{ textAlign: "center", color: "white", textShadow: "1px 1px 2px black", fontWeight: "bold", lineHeight: "100px", // Vertically align text }} > Image {index + 1} </p> </div> ))} </DraggableList> </div> </div> ); } export default App; |
