React Js Rearrange Image Position | change order of img element

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const { useState } = React;
      // Define the App component
      const App = () => {
        const [images, setImages] = useState([
          {
            url: "https://www.sarkarinaukriexams.com/images/import/sne4446407201.png",
          },
          {
            url: "https://www.sarkarinaukriexams.com/images/import/sne86811832.png",
          },
          {
            url: "https://www.sarkarinaukriexams.com/images/import/sne10272423583.png",
          },
          {
            url: "https://www.sarkarinaukriexams.com/images/import/sne1586776004.png",
          },
          {
            url: "https://www.sarkarinaukriexams.com/images/import/sne20464172895.png",
          },
          // Add more images here
        ]);

const [isDragging, setIsDragging] = useState(false);
        const [dragIndex, setDragIndex] = useState(-1);
        const [dragOffset, setDragOffset] = useState(0);

const startDrag = (index, event) => {
          setDragIndex(index);
          event.dataTransfer.effectAllowed = "move";
          event.dataTransfer.setData("text", index);
        };

const onDragOver = (event) => {
          event.preventDefault();
          event.dataTransfer.dropEffect = "move";
        };

const onDrop = (index, event) => {
          event.preventDefault();
          const movedImageIndex = event.dataTransfer.getData("text");
          if (movedImageIndex !== "") {
            const fromIndex = parseInt(movedImageIndex);
            const toIndex = index;

// Rearrange the images array
            const movedImage = images[fromIndex];
            const updatedImages = [...images];
            updatedImages.splice(fromIndex, 1);
            updatedImages.splice(toIndex, 0, movedImage);
            setImages(updatedImages);
          }
          setDragIndex(-1);
        };

return (
          <div className="container">
            <h3>Reactjs Rearrange Image Position</h3>
            <div className="image-container">
              {images.map((image, index) => (
                <div
                  key={index}
                  draggable="true"
                  onDragStart={(event) => startDrag(index, event)}
                  onDragOver={(event) => onDragOver(event)}
                  onDrop={(event) => onDrop(index, event)}
                >
                  <img src={image.url} alt="Image" />
                </div>
              ))}
            </div>
          </div>
        );
      };

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        font-family: Arial, sans-serif;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        position: relative;
      }
      .image-container {
        display: flex;
        overflow-x: auto;
        width: 100%;
      }

.image-container img {
        width: 150px;
        height: 150px;
        margin: 10px;
        cursor: grab;
        border-radius: 5px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease;
      }

.image-container img:active {
        cursor: grabbing;
      }

/* Optional styles for better visual feedback during dragging */
      .image-container img:hover {
        transform: scale(1.1);
        z-index: 1;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
      }

.image-container img:active {
        transform: scale(1.2);
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
      }
    </style>
  </body>
</html>