Svelte Draggable Drawer

Hey there! :)

Wondering how this works? Here’s a quick rundown:

  • The form elements should work exactly like you’d expect.
  • You will be able to move the drawer around by dragging from anything other than the interactive elements.
  • If a handle is present, dragging will only be started from it.

FAQ

Why won't the drawer drag from this form?

Clicking or focusing an input, textarea, button, or anything else interactive lets you use it normally instead of starting a drag. Grab any empty space in the drawer, or a handle if one is present, to move it.

What's the difference between range and snapPoints?

range sets how much of the drawer stays visible at its two resting states — fully open and fully closed. snapPoints adds extra stops in between, so a drag can settle at a partial height rather than jumping straight from one end to the other.

Can I open or close the drawer without dragging it?

Yes — it's bound to an isOpen prop, so toggling that from anywhere in your app opens or closes it with the same transition a drag would use.

Does it work with a keyboard?

The drawer and its handle are focusable and respond to the keyboard, so it doesn't depend on pointer or touch input to be usable.

What happens if I click outside the drawer?

Clicking the backdrop closes the drawer and clears any active snap point, the same as dragging it down to the closed position would.

Does it work on touch devices?

Yes — dragging is built on pointer events, so mouse, touch, and pen input are all handled the same way without separate code paths.

Why does the drawer resist a little past the top or bottom?

That's a rubber-band effect applied once you drag past the open or closed limit — it adds resistance instead of stopping abruptly, so the drawer still feels connected to the drag.

Can I control how far it opens?

The drawer's height follows its own content rather than always filling the screen, so how far it opens is mostly determined by what you put inside it, within the bounds set by range.