1. dragula-constrain
Constrain mirrors to their containers with Dragula
dragula-constrain
Package: dragula-constrain
Created by: spatie
Last modified: Wed, 15 Jun 2022 23:52:08 GMT
Version: 1.0.0
License: MIT
Downloads: 17
Repository: https://github.com/spatie/dragula-constrain

Install

npm install dragula-constrain
yarn add dragula-constrain

dragula-constrain

Latest Version on NPM
Software License

Constrain mirrors to their containers with Dragula, similar to jQuery UI draggable's contain.

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

Install

You can install the package via npm:

 $ npm install dragula-constrain

Browser support

dragula-constrain supports at least all modern browsers, starting from IE10.

Usage

import dragula from 'dragula';
import constrain from 'dragula-constrain';

// Set up `myContainer` and `options`..?

const dragula = dragula(myContainer, options);

constrain(dragula);

That's it! The mirror shouldn't spill out of the container anymore while dragging.

This package assumes that the mirror has a fixed position, and the container is non-fixed. It currently only supports constraining mirrors to Dragula's first container (custom container support might get implemented in the future).

Please see CHANGELOG for more information what has changed recently.

Testing

 $ npm run test

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please contact Sebastian De Deyne instead of using the issue tracker.

Credits

About Spatie

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

License

The MIT License (MIT). Please see License File for more information.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code