Dragドラッグでドロップされたアイテムの位置を保存ドラッグアンドドロップ、リアクションバージョン

Question

私はドラッグドラッグして要素をドラッグアンドドロップするために反応ドラッグツール（react-dragula）を使用しています。落とした後にアイテムの位置を保存する方法

dragDecorator =() => { 
      let options = { }; 
      Dragula([componentBackingInstance], options); 
      }; 

    <div className="wrapper" ref={this.dragDecorator}> 
     <div className="container col-md-4" id="0"> 
     <div className="panel panel-white" id="A1"> 
     </div> 
     <div className="panel panel-white" id="A2"> 
     </div> 
     </div> 
     <div className="container col-md-4" id="0"> 
     <div className="panel panel-white" id="B1"> 
     </div> 
     <div className="panel panel-white" id="B2"> 
     </div> 
     </div> 
    </div> 

Answer 1

dragDecorator = (componentBackingInstance) => { 
    if (componentBackingInstance) { 
     let options = {}; 

     const dragula = Dragula([componentBackingInstance], options); 
     dragula.on('drop', (el, target, source, sibling) => { 
     const newColumnIndex = parseInt(get(target, 'id')); 
     const previousColumnIndex = parseInt(get(source, 'id')); 
     const belowId = get(sibling, 'id'); 
     const itemId = get(el, 'id'); 

     let columns = this.state.columns; 
     if (belowId === undefined) { 
      const newItemIndex = columns[newColumnIndex].items.length; 
      columns[previousColumnIndex].items.splice(columns[previousColumnIndex].items.indexOf(itemId), 1); 
      columns[newColumnIndex].items.splice(newItemIndex, 0, itemId); 
      this.setState({columns}); 
     } 
     else { 
      const newItemIndex = columns[newColumnIndex].items.indexOf(belowId); 
      columns[previousColumnIndex].items.splice(columns[previousColumnIndex].items.indexOf(itemId), 1); 
      columns[newColumnIndex].items.splice(newItemIndex, 0, itemId); 
      this.setState({columns}); 
     } 

     if (this.props.onDrag !== undefined) { 
      this.props.onDrag(columns); 
     } 
     }) 
    } 
    }; 

列は、そのIDに基づいて、各列のドラッグアイテムの新しい位置を含むアレイを返します。