将元素拖动到其可滚动的父div之外-（React-Draggable）

Question

React-Draggable , I am implementing a drag-drop functionality in which a div ( with an image and some elements ) has to be dragged and dropped into different categories, but when we drag the element its able to be dragged only within the parent div and when we try to drag it out, div goes behind the div.

Draggable element:

<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>

Is there a way in which we could drag the element outside the parent div into its desired destination, I am using React with Typescript

Note: I am able to still drop the element into its destination, but the only thing is the div goes behind and it looks kind of bad.

Answer 1

The fix for this was, the div containing the drag elements had a scroll

overflow-y: scroll;

when dragging I had the remove it.after which I was able to move the element outside the div. spent a lot of time trying to get the element out didn't think about tweaking the scroll.