Блог

Я реализовал react-beautiful-dnd для выпадающих меню начальной загрузки react, но пока я перетаскиваю всю строку, она выходит из контейнера. Чего я хочу, так это. Мне нужно раскрывающееся меню начальной загрузки React с изменением порядка строк с помощью опции перетаскивания. Я приложил свой код, пожалуйста, помогите мне решить эту проблему

Спасибо. Вот раскрывающийся код начальной загрузки

 <Dropdown className="dropdown-inline">
   <Dropdown.Toggle
      id="dropdown-toggle-top"
          as={DropdownCustomToggler}
 >
    <button
         type="button"
             className="btn btn-primary dropdown-toggle"
     >
         <span className="svg-icon svg-icon-md svg-icon-white">
            <SVG src{toAbsoluteUrl("/media/svg/icons/Files/Column.svg")}
                 className="h-50 align-self-center"></SVG>
          </span>
     </button>
     </Dropdown.Toggle>
      <Dropdown.Menu 
        className="dropdown-menu dropdown-menu-lg dropdown-menu-right">
            <ColumnFilterDropdown
              menuItems={columnNames}
              togleHandler={togleHandler}
              checked={checked}
            />
          </Dropdown.Menu>
        </Dropdown>
 

Перетаскивание кода

 import React, { useState, useEffect } from "react";
import SVG from "react-inlinesvg";
import { Dropdown } from "react-bootstrap";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import { toAbsoluteUrl } from "./../../helpers/AssetsHelpers";
import ToggleSwitch from "./../controls/forms/ToggleSwitch";

// DND
import { DragDropContext, Droppable, Draggable } from "react-beautiful- 
dnd";

function ColumnFilterDropdown({ menuItems, togleHandler }) {
// Filter
const [search, setSearch] = useState("");
const [filteredColumns, setFilteredColumns] = useState([]);

useEffect(() => {
   setFilteredColumns(menuItems);
    setFilteredColumns(
     menuItems.filter((column) =>
     column.value.toLowerCase().includes(search.toLowerCase())
   )
 );
}, [menuItems, search]);

const onDragEnd = (param) => {
const srcIndex = param.source.index;
const desIndex = param.destination.index;
menuItems.splice(desIndex, 0, menuItems.splice(srcIndex, 1)[0]);
console.log(param);
};

return (
 <>
  <Container>
    <Dropdown.Header>
      <div className="input-icon h-40px">
        <input
          type="text"
          className="form-control form-control-lg form-control-solid h- 
           40px"
          placeholder="Search..."
          id="generalSearch"
          autoComplete="false"
          onChange={(e) => setSearch(e.target.value)}
        />
        <span>
          <span className="svg-icon svg-icon-lg">
            <SVG
              src={toAbsoluteUrl("/media/svg/icons/General/Search.svg")}
            />
          </span>
        </span>
      </div>
    </Dropdown.Header>
    <DragDropContext onDragEnd={(param) => onDragEnd(param)}>
      <Droppable droppableId="droppable-1">
        {(provided, _) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {filteredColumns?.map((column, i) => (
              <Draggable
                key={column.value}
                draggableId={"draggable-"   column.value}
                index={i}
              >
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    style={{
                      ...provided.draggableProps.style,
                      boxShadow: snapshot.isDragging
                        ? "0 0 .4rem #666"
                        : "none",
                    }}
                  >
                    <div key={column.value}>
                      <Row {...provided.dragHandleProps}>
                        <Col sm={8}>{column.view}</Col>
                        <Col sm={4} key={column.value}>
                          <ToggleSwitch
                            value={column.value}
                            id={column.value}
                            checked={column.checked}
                            onChange={togleHandler}
                            offstyle="btn-secondary"
                            onstyle="btn-primary"
                          />
                        </Col>
                      </Row>
                    </div>
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
    <Dropdown.Divider />
    <Dropdown.Item>Reset to Default</Dropdown.Item>
  </Container>
  </>
 );
}

export default ColumnFilterDropdown;
 

Проблема, с которой я сталкиваюсь. пожалуйста, посмотрите расстояние между курсором и строкой