@neodrag/vanilla
TypeScript icon, indicating that this package has built-in type declarations

2.0.4Β β€’Β PublicΒ β€’Β Published

@neodrag/vanilla

One draggable to rule em all

A lightweight vanillaJS library to make your elements draggable.

Getting Started

Features

  • 🀏 Tiny - Only 1.79KB min+brotli.
  • πŸ‡ Simple - Quite simple to use, and effectively no-config required!
  • πŸ§™β€β™€οΈ Elegant - Single class, very easy to use.
  • πŸ—ƒοΈ Highly customizable - Offers tons of options that you can modify to get different behavior.
  • βš›οΈ Reactive - Change options passed to it on the fly, it will just work πŸ™‚

Installing

pnpm add @neodrag/vanilla

# npm
npm install @neodrag/vanilla

# yarn
yarn add @neodrag/vanilla

Usage

Basic usage

import { Draggable } from '@neodrag/vanilla';

const dragInstance = new Draggable(document.querySelector('#drag'));

With options

import { Draggable } from '@neodrag/vanilla';

const dragInstance = new Draggable(document.querySelector('#drag'), {
	axis: 'x',
	grid: [10, 10],
});

Defining options elsewhere with typescript

import { type Draggable } from '@neodrag/vanilla';

const options: DragOptions = {
	axis: 'y',
	bounds: 'parent',
};

const dragInstance = new Draggable(document.querySelector('#drag'), options);

Update options:

import { Draggable } from '@neodrag/vanilla';

const dragInstance = new Draggable(document.querySelector('#drag'), {
	axis: 'x',
	grid: [10, 10],
});

// Update the specific options. Will be merged with the existing options.
dragInstance.update({
	axis: 'y',
});

// Completely overrides existing options, in this case, the `grid` property is removed
dragInstance.options = {
	axis: 'y',
};

Read the docs

Credits

Inspired from the amazing react-draggable library, and implements even more features with a similar API, but 3.7x smaller.

License

MIT License Β© Puru Vijay

Package Sidebar

Install

npm i @neodrag/vanilla

Weekly Downloads

236

Version

2.0.4

License

MIT

Unpacked Size

28.3 kB

Total Files

6

Last publish

Collaborators

  • puruvj