search

PuruVJ / neodrag

One Draggable to rule them all 💍
https://neodrag.dev
MIT License
1.59k stars 48 forks source link

Borders are not considered in bounds calculation #110

Open nhasdarjian opened 1 year ago

nhasdarjian commented 1 year ago

Hey @PuruVJ, very cool project, saved me from reimplementing drag on my own.

One thing I noticed, when I add a draggable div with {bounds: 'parent'} as a child of another div, the draggable is able to move outside the parent's bounds if it has a border of any size greater than 0.

I tried working around it with DragBoundsCoords, but my border thickness is stored as a global CSS variable and extracting it in Svelte proved unsuccessful. I'm using the Svelte bindings if that makes a difference.

Please let me know if there's anything I can do to fix this myself! The picture below shows the blue border of the white panel moving past its parent's bounds (background image) image

Perhaps it can be fixed with a flag in DragOptions whether to include border or not?

PuruVJ commented 1 year ago

Its something I plan to add. As a workaround, you could use the box-shadow to create the border, as it doesn't have its own space in the box model.

box:shadow: 0 0 0 2px black should make a 2px border.

Sharing just in case you're not aware :)