在拖动对象上可以排序到任何顺序吗？

Question

我只想更改对象的拖放顺序？

这是代码的链接，我已经开发了：https://codesandbox.io/s/dragdrop-p3goq

  

我期望的是，在拖动右侧容器的对象时，可以以任何顺序进行排序。

这是我的js文件

<Row id="row3">
  {/* left Container */}
  <Col xs={6} id="col31">
    <div>
      {this.state.tasks.map(obj => {
        // console.log(obj)
        return (
          <div
            id="obj"
            key={obj.id}
            onDragOver={e => {
              this.allowDrop(e);
            }}
            draggable="true"
            onDragStart={e => this.onDragStart(e, obj.id, obj.taskName, obj.content)}
          >
            {obj.id}.{obj.taskName}
          </div>
        );
      })}
    </div>
  </Col>
  {/* Right Container */}
  <Col
    id="col32"
    xs={6}
    onDragOver={e => {
      this.allowDrop(e);
    }}
    onDrop={this.onDropRight}
  >
    <p className="thicker">{this.state.Course}</p>

    {rightContainer.map(item => {
      debugger;
      return (
        <div key={item.id} id="rightContainer">
          {item.Q}
          {item.qNo}
          {item.headingType} {item.qName}
          <a id="remove" onClick={() => this.onRemove(item)}>
            X
          </a>
        </div>
      );
    })}
    <div id="next">
      <Button type="button" id="cancel" variant="primary" size="sm">
        Cancel
      </Button>
      <Button type="button" variant="success " onClick={() => this.Next()} size="sm">
        Next
      </Button>
    </div>
  </Col>
</Row>

我想要的是： 在以任意顺序从左向右拖动对象时，或者在按下后，我可以以任何顺序更改其索引。

谢谢。