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 |