Javascript 如何防止react js和react dnd中的原始容器掉入？

我正在使用React和React漂亮的dnd

这把我难住了

我的用例是将项目从container1拖到container2

不能将Container1中的项目仅放入容器2中的容器1中。 如果容器1中的某个项目正在拖动，则容器1中的其余项目不应移动以允许拖放。 我创建了一个提琴示例来隔离用例-

谢谢你的帮助

---

G

如果我了解你想要什么：

允许将容器1中的项目移动到容器2中。 不要让容器1为空。 不允许将任何物品移回容器1中。 可选：我还对其进行了设置，以便您可以通过在DroppableContainer中传递isDragDisabled道具来禁用拖动，例如：

<DroppableContainer
  droppableId="Container2"
  title="Container 2"
  data={this.state.container2Data}
  isDragDisabled
/>

工作示例：

组件/Workspace.js

components/DroppableContainer.js

components/DragableItem.js

---

如果我理解你想要什么：

允许将容器1中的项目移动到容器2中。 不要让容器1为空。 不允许将任何物品移回容器1中。 可选：我还对其进行了设置，以便您可以通过在DroppableContainer中传递isDragDisabled道具来禁用拖动，例如：

<DroppableContainer
  droppableId="Container2"
  title="Container 2"
  data={this.state.container2Data}
  isDragDisabled
/>

工作示例：

组件/Workspace.js

components/DroppableContainer.js

components/DragableItem.js

---

正是我需要的！谢谢你，这正是我所需要的！非常感谢。

import React, { PureComponent } from "react";
import { Droppable } from "react-beautiful-dnd";
import { Col } from "react-bootstrap";
import styled from "styled-components";
import DraggableItem from "./DraggableItem";

const StyledDiv = styled.div`
  border: 1px solid #000080;
  padding: 15px;
`;

export default class DroppableContainer extends PureComponent {
  renderDraggableItems = () =>
    this.props.data.map((item, i) => (
      <DraggableItem
        key={i}
        item={item}
        index={i}
        isDragDisabled={
          this.props.isDragDisabled || this.props.data.length === 1
        }
      />
    ));

  render = () => (
    <Col sm={4}>
      <Droppable
        droppableId={this.props.droppableId}
        isDropDisabled={this.props.dropDisabled || false}
      >
        {provided => (
          <StyledDiv
            className={`container ${this.props.data.length === 1 ? "disabled" : null }`}
            ref={provided.innerRef}
            {...provided.droppableProps}
          >
            <div className="row">
              <div className="col">{this.props.title}</div>
            </div>
            {this.renderDraggableItems()}
            {provided.placeholder}
          </StyledDiv>
        )}
      </Droppable>
    </Col>
  );
}

import React from "react";
import { Draggable } from "react-beautiful-dnd";
import { Col } from "react-bootstrap";
import styled from "styled-components";

const DragItemStyled = styled.span`
  text-transform: uppercase;
  outline: none;
  border: 0;
  background-color: ${props => (props.isDragDisabled ? "#d8d8d8" : "#bec7bd")};
  line-height: 32px;
  color: ${props => (props.isDragDisabled ? "#a9a9a9" : "#000080")};
  display: inline-block;
  font-family: Karla, Verdana, sans-serif;
  font-size: 14px;
  padding-left: 15px;
  padding-right: 10px;
  cursor: ${props => (props.isDragDisabled ? "no-drop" : "grab")};
  border-radius: 5px;
  margin-bottom: 5px;
  width: 150px;
`;

const DraggableItem = ({ item, index, isDragDisabled }) => (
  <Draggable
    key={item.id}
    draggableId={JSON.stringify({
      nodeId: item.id,
      type: "DragItem"
    })}
    index={index}
    isDragDisabled={isDragDisabled}
  >
    {provided => (
      <div
        className="row"
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        ref={provided.innerRef}
      >
        <Col md={4}>
          <DragItemStyled isDragDisabled={isDragDisabled}>
            {item.name}
          </DragItemStyled>
        </Col>
      </div>
    )}
  </Draggable>
);

export default DraggableItem;