将一个元素拖到其可滚动的父 div 之外 - ( React-Draggable )答案

【问题标题】：Drag an element outside its scrollable parent div - ( React-Draggable )将一个元素拖到其可滚动的父 div 之外 - ( React-Draggable )
【发布时间】：2019-05-11 02:25:48
【问题描述】：

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 之外的元素拖到所需的目的地，我正在使用 React with Typescript

注意：我仍然可以将元素放到它的目的地，但唯一的问题是 div 落后了，看起来有点糟糕。

【问题讨论】：

"注意：我仍然可以将元素放到它的目的地，但唯一的问题是 div 落后了，看起来有点糟糕。" - 这不只是一个 z-index css 问题吗？与 React-Draggable 问题相反？可能值得将的 z-index 设置为 1000 之类的值，然后看看它会带给你什么。
谢谢@Mark 我试过了，设置z-index不起作用。拖动时它不出来，它仍然在里面移动。

标签： javascript css reactjs typescript drag-and-drop

【解决方案1】：

解决方法是，包含拖动元素的 div 有一个滚动条

overflow-y: scroll;

拖动时，我将其删除。之后，我可以将元素移到 div 之外。花了很多时间试图让元素出来并没有考虑调整滚动。

【讨论】：