Myujth

I have a react component with a Kanban board that uses draggable. In this project The kanban cards are called portfolios and the items within the portfolios are properties. Right now I have it so the properties can be drag and dropped between portfolios but I would also like to make it possible to rearrange the properties within one portfolio but right now if I try to move a property with in the portfolio card it just snaps back to where it started. Thanks for any help!

 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>
 );