Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bound='parent' option in flex box #213

Open
javaxiu opened this issue Dec 28, 2016 · 6 comments · May be fixed by #594
Open

bound='parent' option in flex box #213

javaxiu opened this issue Dec 28, 2016 · 6 comments · May be fixed by #594

Comments

@javaxiu
Copy link

javaxiu commented Dec 28, 2016

in this case :
<div style="display: flex;flex-direction: 'column'; width: 800px; height: 600px">
<div style='width: 300px' id='leftside'></div>
<div style='flex:1'>
<Draggble bounds='parent'><div>bound drag</div></Draggble>
</div>
</div>

bound option seems work fine to lock the draggable div in 800*600 area, but offset left was ignore. i mean draggable div was not suppposed to be able to dragged to x=0px , is was supposed to 300px

is there anyone help me? thanks very much
@Ggayane
Copy link

Ggayane commented Jun 20, 2017

hey, guys. Does anyone solve this problem?

@aphsai
Copy link

aphsai commented Jul 10, 2017

having the same issue, help would be appreciated

@mikelgarciaurbina
Copy link

I have the same issue too

@zhaozeq
Copy link

zhaozeq commented Apr 8, 2019

set position at parent node will resolve this problem

@ilya-maker
Copy link

ilya-maker commented Feb 3, 2021 •
edited

I have the same issue too


<div className={styles.draggable_border}>
    <div ref={this.draggableArea} className={styles.draggable_area}>
        <Draggable bounds='parent' grid={[25, 25]}>
            <div className={styles.entrance}>
                Вход
            </div>
        </Draggable>                              
    </div>
</div>

.draggable_border
    height: 900px
    width: 600px
    background-color: #fff
    border: 2px solid #EFF0F6
    border-radius: 16px
    padding: 30px 30px 100px
    margin: 30px auto 0
    position: relative
    &::after
        background-color: #F6F7FA
        border-radius: 50%
        height: 40px
        width: 40px
        content: ''
        position: absolute
        left: 50%
        bottom: 30px
        transform: translateX(-50%)
.draggable_area
    background-color: #F6F7FA
    border-radius: 16px
    border: 1px dashed #08B7D6
    cursor: cell
    cursor: url('../../../assets/images/icon_duplicate.svg'), auto
    height: 100%
    width: 100%
    position: relative
    .entrance
        color: rgb(224, 229, 241)
        font-size: 29px
        font-weight: bold
        text-align: center

@WTomoharu
Copy link

Hello! I have this issue too.
Maybe, I can fix this issue.
I will try to fix this issue.

@WTomoharu WTomoharu linked a pull request Aug 20, 2021 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: bound='parent' with SVG WTomoharu/react-draggable
7 participants
@javaxiu @aphsai @Ggayane @mikelgarciaurbina @zhaozeq @ilya-maker @WTomoharu