├── .npmignore ├── .gitignore ├── CHANGELOG.md ├── .editorconfig ├── .eslintrc ├── package.json ├── LICENSE.md ├── src └── index.js └── README.md /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /dist 2 | node_modules 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All Notable changes to `dragula-constrain` will be documented in this file 4 | 5 | ## 1.0.0 6 | - Initial release 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | ; This file is for unifying the coding style for different editors and IDEs. 2 | ; More information at http://editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | indent_size = 4 9 | indent_style = space 10 | end_of_line = lf 11 | insert_final_newline = true 12 | trim_trailing_whitespace = true 13 | 14 | [{package.json,*.scss,*.css}] 15 | indent_size = 2 16 | 17 | [*.md] 18 | trim_trailing_whitespace = false 19 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "comma-dangle": [2, "always-multiline"], 4 | "indent": [2, 4], 5 | "linebreak-style": [2, "unix"], 6 | "quotes": [2, "single"], 7 | "semi": [2, "always"], 8 | "sort-imports": ["error", { "ignoreCase": true }], 9 | "space-before-function-paren": ["error", { "anonymous": "always", "named": "never" }], 10 | "strict": [2, "never"] 11 | }, 12 | "parserOptions": { 13 | "ecmaVersion": 6, 14 | "sourceType": "module" 15 | }, 16 | "env": { 17 | "es6": true, 18 | "browser": true 19 | }, 20 | "extends": "eslint:recommended" 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dragula-constrain", 3 | "version": "1.0.0", 4 | "description": "Constrain mirrors to their containers with Dragula", 5 | "main": "dist/index.js", 6 | "jsnext:main": "src/index.js", 7 | "scripts": { 8 | "build": "babel src -d dist", 9 | "lint": "eslint src", 10 | "prepublish": "npm run build" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/spatie/dragula-constrain.git" 15 | }, 16 | "keywords": [ 17 | "spatie" 18 | ], 19 | "author": "Sebastian De Deyne", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/spatie/dragula-constrain/issues" 23 | }, 24 | "homepage": "https://github.com/spatie/dragula-constrain", 25 | "devDependencies": { 26 | "babel-cli": "^6.9.0", 27 | "babel-preset-es2015": "^6.9.0", 28 | "eslint": "^7.1.0" 29 | }, 30 | "babel": { 31 | "presets": [ 32 | "es2015" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Spatie bvba 4 | 5 | > Permission is hereby granted, free of charge, to any person obtaining a copy 6 | > of this software and associated documentation files (the "Software"), to deal 7 | > in the Software without restriction, including without limitation the rights 8 | > to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | > copies of the Software, and to permit persons to whom the Software is 10 | > furnished to do so, subject to the following conditions: 11 | > 12 | > The above copyright notice and this permission notice shall be included in 13 | > all copies or substantial portions of the Software. 14 | > 15 | > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | > IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | > FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | > AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | > LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | > OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | > THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export const constrain = dragula => { 2 | 3 | dragula.on('cloned', function (clone) { 4 | this.constraint = () => ensureElementStaysInContainer(clone, this.containers[0]); 5 | window.addEventListener('mousemove', this.constraint); 6 | }); 7 | 8 | dragula.on('dragend', function () { 9 | window.removeEventListener('mousemove', this.constraint); 10 | }); 11 | 12 | return dragula; 13 | }; 14 | 15 | const ensureElementStaysInContainer = (domElement, domContainer) => { 16 | 17 | const element = elementBoundsAndDimensions(domElement); 18 | const container = containerBounds(domContainer); 19 | 20 | if (element.left < container.left) { 21 | domElement.style.left = `${container.left}px`; 22 | } 23 | 24 | if (element.right > container.right) { 25 | domElement.style.left = `${container.right - element.width}px`; 26 | } 27 | 28 | if (element.top < container.top) { 29 | domElement.style.top = `${container.top}px`; 30 | } 31 | 32 | if (element.bottom > container.bottom) { 33 | domElement.style.top = `${container.bottom - element.height}px`; 34 | } 35 | }; 36 | 37 | const elementBoundsAndDimensions = element => { 38 | 39 | const top = parseInt(element.style.top); 40 | const left = parseInt(element.style.left); 41 | const height = element.clientHeight; 42 | const width = element.clientWidth; 43 | 44 | return { 45 | top, left, height, width, 46 | bottom: top + height, 47 | right: left + width, 48 | }; 49 | }; 50 | 51 | const containerBounds = container => container.getBoundingClientRect(); 52 | 53 | export default constrain; 54 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | [](https://supportukrainenow.org) 3 | 4 | # dragula-constrain 5 | 6 | [![Latest Version on NPM](https://img.shields.io/npm/v/dragula-constrain.svg?style=flat-square)](https://npmjs.com/package/dragula-constrain) 7 | [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md) 8 | 9 | Constrain mirrors to their containers with [Dragula](https://bevacqua.github.io/dragula/), similar to jQuery UI draggable's [contain](https://jqueryui.com/draggable/). 10 | 11 | Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource). 12 | 13 | ## Support us 14 | 15 | [](https://spatie.be/github-ad-click/dragula-constrain) 16 | 17 | We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us). 18 | 19 | We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards). 20 | 21 | ## Postcardware 22 | 23 | You're free to use this package (it's [MIT-licensed](LICENSE.md)), but if it makes it to your production environment you are required to send us a postcard from your hometown, mentioning which of our package(s) you are using. 24 | 25 | Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium. 26 | 27 | The best postcards will get published on the open source page on our website. 28 | 29 | ## Install 30 | 31 | You can install the package via npm: 32 | 33 | ```bash 34 | $ npm install dragula-constrain 35 | ``` 36 | 37 | ## Browser support 38 | 39 | `dragula-constrain` supports at least all modern browsers, starting from IE10. 40 | 41 | ## Usage 42 | 43 | ```es6 44 | import dragula from 'dragula'; 45 | import constrain from 'dragula-constrain'; 46 | 47 | // Set up `myContainer` and `options`... 48 | 49 | const dragula = dragula(myContainer, options); 50 | 51 | constrain(dragula); 52 | ``` 53 | 54 | That's it! The mirror shouldn't spill out of the container anymore while dragging. 55 | 56 | 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). 57 | 58 | Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. 59 | 60 | ## Testing 61 | 62 | ``` bash 63 | $ npm run test 64 | ``` 65 | 66 | ## Contributing 67 | 68 | Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details. 69 | 70 | ## Security 71 | 72 | If you discover any security related issues, please contact [Sebastian De Deyne](https://github.com/sebastiandedeyne) instead of using the issue tracker. 73 | 74 | ## Credits 75 | 76 | - [Sebastian De Deyne](https://github.com/sebastiandedeyne) 77 | - [All Contributors](../../contributors) 78 | 79 | ## About Spatie 80 | Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource). 81 | 82 | ## License 83 | 84 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 85 | --------------------------------------------------------------------------------