React-Draggable , я реализую функциональность перетаскивания, в которой div (с изображением и некоторыми элементами) нужно перетаскивать в разные категории, нокогда мы перетаскиваем элемент, его можно перетаскивать только внутри родительского элемента div, а когда мы пытаемся перетащить его, элемент div следует за элементом div.

Перетаскиваемый элемент:
<Draggable
position={{ x: 0, y: 0 }}
onDrag={this.props.groupPageDragStartHandler}
onStop={(event) => this.props.groupPageDragStopHandler(event, this.props.group, this.props.pageInfo)}
defaultClassNameDragging="groupItemDragging"
>
<div className="group-report-items col-sm-4">
<div className="canvas-outer">
<input type="checkbox" className="checkbox" id={checkBoxId} value={checkBoxId} checked={this.state.selected} />
<canvas
className="groupCanvas"
id={canvasId}
height="792"
width="612"
ref="imageCanvas"
onClick={(event) => this.selectHandler(event, this.props.group, this.props.pageInfo)}></canvas>
<a canvas-id={canvasId} href="javascript:void(0)" className="search">
<i className="glyphicon glyphicon-search">
</i>
</a>
<a href="javascript:void(0)" className="trash">
<i className="glyphicon glyphicon-trash" onClick={(event) => this.props.onPageDeleteHandler(event, this.props.group, this.props.pageInfo)}>
</i>
</a>
</div></div></Draggable>
Есть ли способ, которым мы могли бы перетащить элемент за пределы родительского div в желаемое место назначения, я использую Реагировать с Typescript
Примечание: Я все еще могу перетащить элемент в его место назначения, но единственная вещь - это то, что div отстает и выглядит немного плохо.