sheet-draggable

A lightweight utility that closes an element when dragged beyond a threshold - such as Bottom Sheet UI. It ships only the drag-to-close behavior (no UI), and can be used standalone or together with any framework (React, Vue, Svelte, etc.).

demos

• bottom
• top
• right
• handle

Usage

$ npm install --save https://www.npmjs.com/package/sheet-draggable

import { SheetDraggable } from 'sheet-draggable';

const openButtonEl = document.querySelector( '.OpenButton' );
const closeButtonEl = document.querySelector( '.CloseButton' );
const panelEl = document.querySelector( '.Panel' );

const sheet = new SheetDraggable( panelEl, { side: 'bottom' } );

openButtonEl.addEventListener( 'click', () => sheet.show() );
closeButtonEl.addEventListener( 'click', () => sheet.hide() );

Constructor Parameters

param	required
element	required	HTMLElement - the element to make draggable
options	optional	configuration object for the behavior

Options

param	required
side	optional	'top' | 'bottom' | 'left' | 'right'. the position of the draggable sheet
handle	optional	HTMLElement for the drag handle. default is undefined, which means the entire panel is draggable.
dismissThreshold	optional	threshold in px to dismiss the sheet when released. default is 64
dragThreshold	optional	threshold in px to start dragging. default is 5

Methods

method	description
show()	Show the sheet
hide()	Hide the sheet
destroy()	Destroy the instance and event listeners

Events

event	description
'show'	Fired when the sheet is shown
'hide'	Fired when the sheet is hidden