https://github.com/lucasmenendez/selection-area

Simple JavaScript mouse & touch seletion area to any DOM container element
https://github.com/lucasmenendez/selection-area

javascript selection selection-area ui

Last synced: about 2 months ago
JSON representation

Simple JavaScript mouse & touch seletion area to any DOM container element

• Host: GitHub
• URL: https://github.com/lucasmenendez/selection-area
• Owner: lucasmenendez
• License: mit
• Created: 2014-12-16T00:36:18.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2020-01-04T13:31:43.000Z (about 5 years ago)
• Last Synced: 2024-10-31T18:36:10.157Z (2 months ago)
• Topics: javascript, selection, selection-area, ui
• Language: JavaScript
• Homepage: http://lucasmenendez.github.io/selection-area/
• Size: 36.1 KB
• Stars: 20
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        



# Selection Area

[![npm version](https://img.shields.io/badge/npm%20package-1.1.0-green.svg)](https://www.npmjs.com/package/selection-area) [![documentation](https://img.shields.io/badge/docs-link-blue.svg)](docs/README.md)




Simple JavaScript mouse & touch seletion area to any DOM container element.




[How to use](#how-to-use) | [API Reference](docs/README.md) | [Demo](http://lucasmenendez.github.io/selection-area/)




## How to use

### Download

#### Install with `npm`

```sh

npm install selection-area

```

#### Install with `yarn`

```sh

yarn add selection-area

```

#### From Source Code

Clone or download zipped source code into `node_modules` project folder.

```sh

git clone https://github.com/lucasmenendez/selection-area.git /node_modules/selection-area

```

### Import

#### Local dist version

Import using `script` html tags with vendor path:

```html

```

Or import using ES6 `import`:

```javascript

import { SelectionArea } from 'selection-area';

```

#### CDN version

Importing with [unpkg.com](https://unpkg.com):

```html

```

### Example

Define container for selection area and selectable childs.

```html



    
0

    
1

    
2

    
3

    
4

    
5

    
6

    
7

    
8

    
9



```


Define `SelectionArea` behaviour with `configuration` object, check available parameters [here](docs/README.md#parameters). 

```js

let config = {

    container: document.querySelector('.parent'),

    area: {

        class: 'custom-area'

    },

    targets: '.child',

    touchable: true,

    autostart: true,

    callback: selection => {

        if (selection.length == 0) alert("empty selection");

        else alert(`${ selection.length } items selected`);

    }

}

let selectable = new SelectionArea(config);

```

Also you can stylize the selection area element adding style yo defined class.

```css

.custom-area {

    background: rgba(52, 152, 219, 0.2);

    border: 2px dotted #2980b9;

}

```