Ad

Drag An Element Outside Its Scrollable Parent Div - ( React-Draggable )

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.

enter image description here

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} target="_blank" rel="nofollow noreferrer" href="javascript:void(0)" className="search">
                <i className="glyphicon glyphicon-search">
                </i>
                </a>
                <a target="_blank" rel="nofollow noreferrer" 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.

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad