ng2-ui-sortable

Mobile-friendly re-arrangable list element
DEMO

Install

1. install ng2-ui-sortable node module

$ npm install ng2-ui-sortable --save

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

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