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.
npm install drag-to-scroll
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);
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);
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'
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();
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);
This method loops over the static instances
array and destroys all instances.
DragToScroll.destroyAll();
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 |
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 |
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,
);
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
License MIT