DragToScroll

DragToScroll is a TypeScript package that provides a draggable element with scroll functionality. It extends the functionality of the DragToBlank class and adds additional features such as direction control, slide animation, and event propagation control.

Installation

npm install drag-to-scroll

Usage

Instantiation without configurations

You can create a DragToScroll instance without any configurations. The default configurations will be used.

import { DragToScroll } from 'drag-to-scroll';

const element = document.getElementById('my-element');

const draggable = new DragToScroll(element);

Instantiation with configurations

You can also provide a configuration object when creating a DragToScroll instance.

import { DragToScroll } from 'drag-to-scroll';

const element = document.getElementById('my-element');
const config = {
	direction: { x: true, y: false },
	animation: {
		timing: {
			duration: 500,
			easingFactor: 4,
			maxSpeed: 10,
		},
		slide: true,
	},
	preventDefault: true,
	stopPropagation: true,
};

const draggable = new DragToScroll(element, config);

Using the apply method

The apply method allows you to apply the DragToScroll functionality to all elements with a specific class. By default, it applies to elements with the class 'drag-to-scroll', but you can provide a different class as an argument.

import { DragToScroll } from 'drag-to-scroll';

DragToScroll.apply(); // Applies to all elements with the class 'drag-to-scroll'

DragToScroll.apply('my-custom-class'); // Applies to all elements with the class 'my-custom-class'

The destroy instance method

This method removes the event listeners from the instance and removes the instance from the static instances array.

const element = document.getElementById('my-element');
const draggable = new DragToScroll(element);
// ...
draggable.destroy();

The destroy static method

This method finds an instance with a specific DOM element from the static instances array and destroys it using its instance method.

const element = document.getElementById('my-element');
const draggable = new DragToScroll(element);
// ...
DragToScroll.destroy(element);

The destroyAll static method

This method loops over the static instances array and destroys all instances.

DragToScroll.destroyAll();

Configuration

The DragToScroll constructor takes a configuration object with the following optional properties:

Property	Type	Description	Default value
direction	Object	An object with x and y properties, indicating whether the element should be draggable in the x and y directions respectively.	{ x: true, y: true }
animation	Object	An object controlling the slide animation. See Animation Configuration for more details.
preventDefault	Boolean	A boolean indicating whether the default action should be prevented when the user starts dragging.	true
stopPropagation	Boolean	A boolean indicating whether the event should stop being propagated when the user starts dragging.	true

Animation Configuration

The animation property in the configuration object controls the slide animation. It has the following properties:

Property	Type	Description	Default value
timing	Object	An object with duration:number (in milliseconds), easingFactor:number (>=1, 1 is linear), and maxSpeed:number (px/0.0001s) properties.	{ duration: 1500, easingFactor: 4, maxSpeed: 10 }
slide	Boolean	A boolean indicating whether the element should continue to slide after the user stops dragging.	true

Properties

instances

This is a static property that holds an array of all active DragToScroll instances.

static instances: DragToScroll[] = [];

You can use this property to access all active instances of the DragToScroll class. For example, you can use it to find an instance:

const element = document.getElementById('my-element');
new DragToScroll(element);
// ...
const instance = DragToScroll.instances.find(
	(i) => i.element === element,
);

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License MIT