I am building a simple react app and I am trying to implement React Sortable Js to my bootstrap grid style. But When I wrap with <ReactSortable> then grid doesn't remain two boxes side by side in two row but it becomes one box in one line in four rows.

CodeSandBox :- My React App Codesandbox

App.js

function Card({ item }) {

  return (
    <div>
      <Col
        sm
        className="grid-view lrg-view"
      >
        <h5 style={{ textAlign: "center" }}>{item.name}</h5>
        <hr />
      </Col>
      <br />
      <br />
      <br />
      <br />
    </div>
  );
}

function App() {
  const [thirdGroup, setThirdGroup] = useState([
    { name: "Box 1", id: "1" },
    { name: "Box 2", id: "2" },
    { name: "Box 3", id: "3" },
    { name: "Box 4", id: "4" }
  ]);

  return (
    <Container>
      <Row>
        <ReactSortable
          list={thirdGroup}
          setList={setThirdGroup}
          animation={250}
        >
          {thirdGroup.map((item) => (
            <Card key={item.id} item={item} />
          ))}
        </ReactSortable>
      </Row>
    </Container>
  )

I have also tried by putting Row inside ReactSortable then It is showing grid but not sorting.

I am trying for hours and looked into many issues but it is still not working.

What I am trying to do

I am trying to put two boxes side by side in one row and then same for the second row. Like Grid Row in Bootstrap

CodePudding user response：

There are several problems in your snippet.

• The react-bootstrap Col component is required to be a direct child of the Row component for the grid layout to work. Since the direct child of the Row component in your snippet is the ReactSortable component, then it doesn't satisfy this requirement.

• Your Card component should be the Col component instead of a div. This satisfies the requirement mentioned above.

To resolve the problem, we need the ReactSortable component to act as a Row component, using the tag property. You may refer to this part of the documentation for more info.

A working example on codesandbox:

import "./styles.css";
import { ReactSortable } from "react-sortablejs";
import { useState } from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

function Card({ item }) {
  let backgroundColor = "#dad9f3";

  return (
    <Col
      sm
      className="grid-view lrg-view"
      style={Object.assign({}, { backgroundColor })}
    >
      <h5 style={{ textAlign: "center" }}>{item.name}</h5>
      <hr />
    </Col>
  );
}

export default function App() {
  const [thirdGroup, setThirdGroup] = useState([
    { name: "Box 1", id: "1" },
    { name: "Box 2", id: "2" },
    { name: "Box 3", id: "3" },
    { name: "Box 4", id: "4" }
  ]);

  return (
    <Container>
      <ReactSortable
        tag={Row}
        list={thirdGroup}
        setList={setThirdGroup}
        animation={250}
      >
        {thirdGroup.map((item) => (
          <Card key={item.id} item={item} />
        ))}
      </ReactSortable>
    </Container>
  );
}