看板拖放javascript不会在卡内重新排列

Question

我有一个带有可拖动看板的react组件。在此项目中，看板卡称为投资组合，投资组合中的项目为资产。现在我有了它，因此可以在投资组合之间拖放属性，但是我也希望能够重新排列一个投资组合中的属性，但是现在，如果我尝试移动投资组合卡中的属性，它会迅速返回到它开始的地方。感谢您的帮助！

  class OrganizationPortfolio extends Component {
      constructor(props) {
        super(props);
        this.state = {
          assumed: {},
          propertyId: "",
          portfolioId: "",
          orginalPortfolio: "",
          dragStartStyle: { opacity: "1" }
        };
      }


      dropped(portfolio) {
        console.log("dropped");
        if (this.state.portfolioId !== this.state.orginalPortfolio) {
          this.props
            .updateProperty({
              variables: {
                propertyId: this.state.propertyId,
                edits: { portfolioId: this.state.portfolioId }
              }
            })
            .then(() => {
              Bert.alert("moved property.", "success", "growl-top-right");
            })
            .catch(error => {
              Bert.alert("Error moving property.", "danger", "growl-top-right");
            });
        }
        this.setState({ dragStartStyle: { opacity: "1" } });
      }

      allowDrop(portfolio) {
        console.log("allow drop");
        this.setState({ portfolioId: portfolio._id });
      }

      drop(property, portfolio) {
        console.log("drop");
        this.setState({ propertyId: property.id, orginalPortfolio: portfolio._id });
        this.setState({ dragStartStyle: { opacity: "0.5" } });
      }

      renderKanban = portfolio => {
        const { properties } = portfolio;
        const { dragStartStyle } = this.state;
        return (
          <div
            key={portfolio.id}
            onDragEnd={() => this.dropped(portfolio)}
            onDragOver={() => this.allowDrop(portfolio)}
            className="card-list"
          >
            <div className="card-list-header">
              <h6>{_.capitalize(portfolio.name)}</h6>

              </div>
            </div>
            {_.map(properties, property => {
              return (
                <div
                  draggable
                  key={property.id}
                  className="card-kanban card-list-body"
                  onDrag={() => this.drop(property, portfolio)}
                >
                  <div className="card">
                    <div className="card-body">
                      <div style={dragStartStyle} className="card-title">
                        <h6>
                          {" "}
                          {property.address} <br /> {property.city},{" "}
                          {property.state} {property.zip}{" "}
                        </h6>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        );
      };

      render() {
        const { loading, portfolios } = this.props;
        if (loading) return null;

        return (
          <div className="container-kanban">
            <div className="kanban-board container-fluid mt-lg-3">
              <div className="kanban-col">
                {_.map(portfolios, portfolio => this.renderKanban(portfolio))}
              </div>
            </div>
          </div>
        );
      }
    }