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

Save Position of dragged items with Dragula Drag and Drop, React Version (react-dragula)

本文关键字：React Dragula 版本 保存 拖放 拖动 项目 使用 位置      更新时间：2023-09-26

我使用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>

  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的拖动项的新位置。

相关文章：