Package Exports

ng2-ui-sortable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng2-ui-sortable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ng2-ui-sortable

Mobile-friendly re-arrangable list element

DEMO

Install

install ng2-ui-sortable node module
```
 $ npm install ng2-ui-sortable --save
```

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'];

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;

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.

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
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