代码之家  ›  专栏  ›  技术社区  ›  Praveen Rao Chavan.G

将元素拖动到其可滚动父div之外-(React Draggable)

  •  0
  • Praveen Rao Chavan.G  · 技术社区  · 7 年前

    反应拖拉 div 当我们拖动元素时,它只能在父div和 当我们试图把它拖出来时,div走在div后面。

    enter image description here

    可拖动元件:

    <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落后了,看起来有点糟糕。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Praveen Rao Chavan.G    7 年前

    修复方法是,包含拖动元素的div有一个滚动条

    overflow-y: scroll;