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 有一个滚动条
overflow-y: scroll;
拖动时我将其删除。之后我可以将元素移到 div 之外。花了很多时间试图把元素拿出来,没有考虑调整滚动条。
关于javascript - 将元素拖到其可滚动父 div 之外 - ( React-Draggable ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53701400/