使用 Dragula 拖放保存拖动项目的位置，React 版本 (react-dragula)

Question

我正在使用 react-dragula (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);
        }
      })
    }
  };

Columns 将返回一个数组，其中包括基于其 ID 的每列中拖动项目的新位置。