# ng2-ui-sortable

> Re-arrangable list element

Latest version **0.3.0** (published 2016-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-ui-sortable
pnpm add ng2-ui-sortable
yarn add ng2-ui-sortable
bun add ng2-ui-sortable
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2016-12-12 |
| First published | 2016-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Allen Kim |
| Maintainers | allenkim |

## Links

- npm: https://www.npmjs.com/package/ng2-ui-sortable
- Repository: https://github.com/ng2-ui/ng2-ui-sortable
- Homepage: https://github.com/ng2-ui/ng2-ui-sortable#readme
- Issues: https://github.com/ng2-ui/ng2-ui-sortable/issues
- npm.io page: https://npm.io/package/ng2-ui-sortable

## Recent versions

- 0.3.0 (latest) — 2016-12-12
- 0.2.3 — 2016-09-17
- 0.2.2 — 2016-09-12
- 0.2.1 — 2016-09-12
- 0.2.0 — 2016-09-11
- 0.1.0 — 2016-08-28

## README

# ng2-ui-sortable

Mobile-friendly re-arrangable list element

<a href="https://rawgit.com/ng2-ui/ng2-ui-sortable/master/app/index.html">
  DEMO
  <!-- img src="http://i.imgur.com/0qcxg8X.png" width="50% border="1" / -->
</a>

## Install

1. install ng2-ui-sortable node module

        $ npm install ng2-ui-sortable --save

2. add `map` and `packages` to your `systemjs.config.js`

        map['ng2-ui-sortable'] = 'node_modules/ng2-ui-sortable/dist';
        packages['ng2-ui-sortable'] = { main: 'ng2-ui-sortable.umd.js', defaultExtension: 'js'];

3. import Ng2SortableModule to your AppModule

        import { NgModule } from '@angular/core';
        import { FormsModule } from "@angular/forms";
        import { BrowserModule  } from '@angular/platform-browser';
        import { AppComponent } from './app.component';
        import { Ng2SortableModule } from 'ng2-ui-sortable';
        
        @NgModule({
          imports: [BrowserModule, FormsModule, Ng2SortableModule],
          declarations: [AppComponent],
          bootstrap: [ AppComponent ]
        })
        export class AppModule { }


For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`
  - `app.module.ts`
  -  and `app.component.ts`.

## Usage it in your code

add `hammer.js` in your html

    <script src="../node_modules/hammerjs/hammer.js"></script>
  
You are ready. use it in your template


    <ul ng2-sortable>
      <li id="order">Order</li>
      <li id="me">Me</li>
      <li id="right">Right</li>
      <li id="the">The</li>
      <li id="into">Into</li>
      <li id="put">Put</li>
    </ul>

## Without css, it still works, but for better styling, please use some css. e.g.;

    ul[ng2-sortable] {
       padding: 10px; 
       border: 1px solid #ccc;
      list-style: none; 
      display: block
    }
    ul[ng2-sortable] li {
      padding: 10px 5px;
      background: #4986e7;
      color: #fff; 
      border: 1px solid #fff;
      display: block; 
      position: relative
    }
    ul[ng2-sortable] li.drag-enter {
      border-top: 2px solid yellow;
    }

## For Developers

  Things to know to understand the implementation;
  
  1.  **transform: 'translate(x, y)'**   
      when  drag an element. which sets the position of an element to a new one, described by two vectors (x, y). The y value is optional.</li>
      
  2. **document.elementFromPoint(x, y)**   
      The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates.
      https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint
  
  3. pan events(a gesture event)
  
      * event.center     {Object}  center position of the touches. contains pageX and pageY
      * event.deltaTime  {Number}  the total time of the touches in the screen
      * event.deltaX     {Number}  the delta on x axis we haved moved
      * event.deltaY     {Number}  the delta on y axis we haved moved

---
_Source: https://npm.io/package/ng2-ui-sortable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._