Re-arrangable list element

Downloads in past


1010.3.06 years ago7 years agoMinified + gzip package size for ng2-ui-sortable in KB


Mobile-friendly re-arrangable list element


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

  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>

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.

3. pan events(a gesture event)
*     {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