├── .gitignore ├── dist ├── sortable.module.d.ts ├── index.js.map ├── index.d.ts ├── index.js ├── sortable.module.js.map ├── index.metadata.json ├── sortable.directive.d.ts ├── sortable.module.js ├── sortable.module.metadata.json ├── sortable.directive.metadata.json ├── sortable.directive.js.map ├── sortable.directive.js ├── sortable.umd.js └── sortable.umd.js.map ├── src ├── index.ts ├── sortable.module.ts └── sortable.directive.ts ├── app ├── index.html ├── main.ts ├── app.component.ts └── webpack.config.js ├── LICENSE.md ├── webpack.config.js ├── tsconfig.json ├── tsconfig.ngc.json ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings 3 | *.log 4 | *.tgz 5 | .idea 6 | -------------------------------------------------------------------------------- /dist/sortable.module.d.ts: -------------------------------------------------------------------------------- 1 | export declare class NguiSortableModule { 2 | } 3 | -------------------------------------------------------------------------------- /dist/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,2DAA6D;AAGpD,2EAAqB;AAF9B,qDAAuD;AAEvB,kEAAkB","file":"index.js","sourceRoot":""} -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import { NguiSortableDirective } from './sortable.directive'; 2 | import { NguiSortableModule } from './sortable.module'; 3 | export { NguiSortableDirective, NguiSortableModule }; 4 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { NguiSortableDirective } from './sortable.directive'; 2 | import { NguiSortableModule } from './sortable.module'; 3 | 4 | export { NguiSortableDirective, NguiSortableModule }; 5 | 6 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var sortable_directive_1 = require("./sortable.directive"); 4 | exports.NguiSortableDirective = sortable_directive_1.NguiSortableDirective; 5 | var sortable_module_1 = require("./sortable.module"); 6 | exports.NguiSortableModule = sortable_module_1.NguiSortableModule; 7 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /src/sortable.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule } from "@angular/forms"; 3 | import { CommonModule } from '@angular/common'; 4 | 5 | import { NguiSortableDirective } from './sortable.directive'; 6 | 7 | @NgModule({ 8 | imports: [ CommonModule, FormsModule ], 9 | declarations: [NguiSortableDirective], 10 | exports: [ NguiSortableDirective ] 11 | }) 12 | export class NguiSortableModule {} 13 | 14 | -------------------------------------------------------------------------------- /dist/sortable.module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/sortable.module.ts"],"names":[],"mappings":";;AAAA,sCAAyC;AACzC,wCAA6C;AAC7C,0CAAgD;AAEhD,2DAA6D;AAG7D;IAAA;IAUA,CAAC;IAAD,yBAAC;AAAD,CAVA,AAUC;AAVuC,6BAAU,GAA0B;IAC5E,EAAE,IAAI,EAAE,eAAQ,EAAE,IAAI,EAAE,CAAC;gBACvB,OAAO,EAAE,CAAE,qBAAY,EAAE,mBAAW,CAAE;gBACtC,YAAY,EAAE,CAAC,0CAAqB,CAAC;gBACrC,OAAO,EAAE,CAAE,0CAAqB,CAAE;aACnC,EAAG,EAAE;CACL,CAAC;AACF,kBAAkB;AACX,iCAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AATW,gDAAkB","file":"sortable.module.js","sourceRoot":""} -------------------------------------------------------------------------------- /dist/index.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"NguiSortableDirective":{"__symbolic":"reference","module":"./sortable.directive","name":"NguiSortableDirective"},"NguiSortableModule":{"__symbolic":"reference","module":"./sortable.module","name":"NguiSortableModule"}}},{"__symbolic":"module","version":1,"metadata":{"NguiSortableDirective":{"__symbolic":"reference","module":"./sortable.directive","name":"NguiSortableDirective"},"NguiSortableModule":{"__symbolic":"reference","module":"./sortable.module","name":"NguiSortableModule"}}}] -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular2 Npm Package Example 5 | 6 | 7 | 8 | 9 | Loading... 10 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /dist/sortable.directive.d.ts: -------------------------------------------------------------------------------- 1 | import { ViewContainerRef, EventEmitter } from '@angular/core'; 2 | export declare class NguiSortableDirective { 3 | viewContainerRef: ViewContainerRef; 4 | ulEl: HTMLElement; 5 | liEls: NodeListOf; 6 | draggingEl: HTMLElement; 7 | elDragEnter: HTMLElement; 8 | order: string[]; 9 | orderChanged: EventEmitter<{}>; 10 | constructor(viewContainerRef: ViewContainerRef); 11 | ngAfterViewInit(): void; 12 | dragStartHandler: (event: any) => void; 13 | dragHandler: (event: any) => void; 14 | dragEndHandler: (event: any) => void; 15 | emitOrderChanged(): void; 16 | } 17 | -------------------------------------------------------------------------------- /app/main.ts: -------------------------------------------------------------------------------- 1 | // polyfills, comment the following out for debugging purpose 2 | import 'core-js/es6'; 3 | import 'core-js/es7/reflect'; 4 | import 'zone.js/dist/zone'; 5 | 6 | // The browser platform with a compiler 7 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 8 | 9 | // The app module 10 | import { NgModule } from '@angular/core'; 11 | import { BrowserModule } from '@angular/platform-browser'; 12 | import { FormsModule } from "@angular/forms"; 13 | 14 | import { AppComponent } from './app.component'; 15 | //noinspection TypeScriptCheckImport 16 | import { NguiSortableModule } from '@ngui/sortable'; 17 | 18 | @NgModule({ 19 | imports: [BrowserModule, FormsModule, NguiSortableModule], 20 | declarations: [AppComponent], 21 | bootstrap: [ AppComponent ] 22 | }) 23 | export class AppModule { } 24 | 25 | // Compile and launch the module 26 | platformBrowserDynamic().bootstrapModule(AppModule); -------------------------------------------------------------------------------- /app/app.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | template: ` 6 | `, 14 | styles: [` 15 | ul[ngui-sortable] { 16 | padding: 10px; 17 | border: 1px solid #ccc; 18 | list-style: none; 19 | display: block 20 | } 21 | ul[ngui-sortable] li { 22 | padding: 10px 5px; 23 | background: #4986e7; 24 | color: #fff; 25 | border: 1px solid #fff; 26 | display: block; 27 | position: relative; 28 | cursor: pointer; 29 | } 30 | ul[ngui-sortable] li.drag-enter { 31 | border-top: 2px solid yellow; 32 | } 33 | `] 34 | }) 35 | export class AppComponent { 36 | } 37 | -------------------------------------------------------------------------------- /dist/sortable.module.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var core_1 = require("@angular/core"); 4 | var forms_1 = require("@angular/forms"); 5 | var common_1 = require("@angular/common"); 6 | var sortable_directive_1 = require("./sortable.directive"); 7 | var NguiSortableModule = (function () { 8 | function NguiSortableModule() { 9 | } 10 | return NguiSortableModule; 11 | }()); 12 | NguiSortableModule.decorators = [ 13 | { type: core_1.NgModule, args: [{ 14 | imports: [common_1.CommonModule, forms_1.FormsModule], 15 | declarations: [sortable_directive_1.NguiSortableDirective], 16 | exports: [sortable_directive_1.NguiSortableDirective] 17 | },] }, 18 | ]; 19 | /** @nocollapse */ 20 | NguiSortableModule.ctorParameters = function () { return []; }; 21 | exports.NguiSortableModule = NguiSortableModule; 22 | //# sourceMappingURL=sortable.module.js.map -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 Allen Kim 2 | 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | var webpack = require('webpack'); 3 | 4 | var config = { 5 | entry: { 6 | '@ngui/sortable': path.join(__dirname, 'src', 'index.ts') 7 | }, 8 | resolve: { 9 | extensions: ['.ts', '.js', '.json', '.css', '.html'] 10 | }, 11 | resolveLoader: { 12 | modules: [path.join(__dirname, 'node_modules')] 13 | }, 14 | output: { 15 | path: path.join(__dirname, 'dist'), 16 | filename: "sortable.umd.js", 17 | library: ["sortable"], 18 | libraryTarget: "umd" 19 | }, 20 | externals: [ 21 | /^rxjs\//, //.... any other way? rx.umd.min.js does work? 22 | /^@angular\// 23 | ], 24 | devtool: 'source-map', 25 | module: { 26 | rules: [ 27 | { // Support for .ts files. 28 | test: /\.ts$/, 29 | use: ['ts-loader', 'angular2-template-loader'] 30 | } 31 | ] 32 | } 33 | }; 34 | 35 | //Different Environment Setup 36 | 37 | if (process.env.NODE_ENV === 'prod') { 38 | config.module.rules.push({ 39 | test: /\.ts$/, use: 'strip-loader?strip[]=debug,strip[]=console.log' 40 | }); 41 | } 42 | 43 | module.exports = config; 44 | -------------------------------------------------------------------------------- /dist/sortable.module.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"NguiSortableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","module":"./sortable.directive","name":"NguiSortableDirective"}],"exports":[{"__symbolic":"reference","module":"./sortable.directive","name":"NguiSortableDirective"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"NguiSortableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","module":"./sortable.directive","name":"NguiSortableDirective"}],"exports":[{"__symbolic":"reference","module":"./sortable.directive","name":"NguiSortableDirective"}]}]}]}}}] -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["es5", "es6", "dom"], 5 | "module": "commonjs", 6 | "moduleResolution": "node", 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "sourceMap": true, 10 | "pretty": true, 11 | "allowUnreachableCode": true, 12 | "allowUnusedLabels": true, 13 | "noImplicitAny": false, 14 | "noImplicitReturns": false, 15 | "noImplicitUseStrict": false, 16 | "allowSyntheticDefaultImports": true, 17 | "suppressExcessPropertyErrors": true, 18 | "suppressImplicitAnyIndexErrors": true, 19 | "skipDefaultLibCheck": true, 20 | "noEmitHelpers": false, 21 | "isolatedModules": false, 22 | "strictNullChecks": false, 23 | "outDir": "dist", 24 | "baseUrl": "src", 25 | "paths": { 26 | "@ngui/sortable": ["./index"] 27 | } 28 | }, 29 | "types": [ "hammerjs" ], 30 | "files": [ 31 | "src/index.ts" 32 | ], 33 | "exclude": [ 34 | "node_modules" 35 | ], 36 | "compileOnSave": false, 37 | "buildOnSave": false, 38 | "angularCompilerOptions": { 39 | "strictMetadataEmit": true, 40 | "skipTemplateCodegen": true 41 | } 42 | } 43 | 44 | -------------------------------------------------------------------------------- /tsconfig.ngc.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["es5", "es6", "dom"], 5 | "module": "commonjs", 6 | "moduleResolution": "node", 7 | "declaration": true, 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "sourceMap": true, 11 | "pretty": true, 12 | "allowUnreachableCode": true, 13 | "allowUnusedLabels": true, 14 | "noImplicitAny": false, 15 | "noImplicitReturns": false, 16 | "noImplicitUseStrict": false, 17 | "allowSyntheticDefaultImports": true, 18 | "suppressExcessPropertyErrors": true, 19 | "suppressImplicitAnyIndexErrors": true, 20 | "skipDefaultLibCheck": true, 21 | "noEmitHelpers": false, 22 | "isolatedModules": false, 23 | "strictNullChecks": false, 24 | "outDir": "dist", 25 | "baseUrl": "src", 26 | "paths": { 27 | "@ngui/sortable": ["./index"] 28 | } 29 | }, 30 | "files": [ 31 | "src/index.ts" 32 | ], 33 | "exclude": [ 34 | "node_modules" 35 | ], 36 | "compileOnSave": false, 37 | "buildOnSave": false, 38 | "angularCompilerOptions": { 39 | "strictMetadataEmit": true, 40 | "skipTemplateCodegen": true 41 | } 42 | } 43 | 44 | -------------------------------------------------------------------------------- /app/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | const config = { 5 | resolve: { 6 | extensions: ['.ts', '.webpack.js', '.web.js', '.js'], 7 | alias: { 8 | '@ngui/sortable': path.join(__dirname, '..', 'src', 'index') 9 | } 10 | }, 11 | devtool: 'source-map', 12 | entry: './app/main.ts', 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.ts$/, 17 | use: [ 18 | { 19 | loader: 'ts-loader', 20 | options: { 21 | include: ['src/**/*.ts', 'app/**/*.ts'] 22 | }, 23 | }, 24 | 'angular2-template-loader' 25 | ], 26 | }, 27 | { test: /\.html$/, use: ['raw-loader'] } 28 | ] 29 | }, 30 | plugins: [], 31 | output: { 32 | path: `${__dirname}/build/`, 33 | publicPath: '/build/', 34 | filename: 'app.js' 35 | } 36 | }; 37 | 38 | if (process.env.NODE_ENV === 'prod') { 39 | config.plugins = [ 40 | new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) 41 | ]; 42 | config.module.rules.push({ 43 | test: /\.ts$/, use: 'strip-loader?strip[]=debug,strip[]=console.log' 44 | }); 45 | } 46 | 47 | module.exports = config; 48 | -------------------------------------------------------------------------------- /dist/sortable.directive.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"NguiSortableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ngui-sortable]"}]}],"members":{"orderChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"emitOrderChanged":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NguiSortableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ngui-sortable]"}]}],"members":{"orderChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"emitOrderChanged":[{"__symbolic":"method"}]}}}}] -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ngui/sortable", 3 | "version": "0.4.1", 4 | "description": "Re-arrangable list element", 5 | "license": "MIT", 6 | "main": "dist/sortable.umd.js", 7 | "typings": "dist/index.d.ts", 8 | "scripts": { 9 | "start": "NODE_ENV=dev webpack-dev-server --quiet --port 9001 --content-base app --config app/webpack.config --open", 10 | "lint": "tslint 'src/**/*.ts' 'app/**/*.ts'", 11 | "clean": "rimraf dist", 12 | "build": "npm-run-all --serial clean build:ngc build:umd build:app", 13 | "build:ngc": "ngc -p tsconfig.ngc.json", 14 | "build:umd": "NODE_ENV=prod webpack", 15 | "build:app": "NODE_ENV=prod webpack --config app/webpack.config", 16 | "upgrade": "npm-check-updates --upgradeAll" 17 | }, 18 | "dependencies": {}, 19 | "devDependencies": { 20 | "@angular/common": "^4.0.3", 21 | "@angular/compiler": "^4.0.3", 22 | "@angular/compiler-cli": "^4.0.3", 23 | "@angular/core": "^4.0.3", 24 | "@angular/forms": "^4.0.3", 25 | "@angular/http": "^4.0.3", 26 | "@angular/platform-browser": "^4.0.3", 27 | "@angular/platform-browser-dynamic": "^4.0.3", 28 | "@angular/router": "^4.0.3", 29 | "@types/hammerjs": "^2.0.34", 30 | "@types/node": "^7.0.13", 31 | "angular2-template-loader": "^0.6.2", 32 | "codelyzer": "^3.0.0", 33 | "core-js": "^2.4.1", 34 | "hammerjs": "^2.0.8", 35 | "npm-check-updates": "^2.11.0", 36 | "npm-run-all": "^4.0.2", 37 | "raw-loader": "^0.5.1", 38 | "rimraf": "^2.6.1", 39 | "rxjs": "^5.3.0", 40 | "strip-loader": "^0.1.2", 41 | "ts-loader": "^2.0.3", 42 | "tslint": "^5.1.0", 43 | "typescript": "^2.2.2", 44 | "webpack": "^2.4.1", 45 | "webpack-dev-server": "^2.4.4", 46 | "zone.js": "^0.8.9" 47 | }, 48 | "repository": { 49 | "type": "git", 50 | "url": "git+https://github.com/ng2-ui/sortable.git" 51 | }, 52 | "author": "Allen Kim ", 53 | "bugs": { 54 | "url": "https://github.com/ng2-ui/sortable/issues" 55 | }, 56 | "homepage": "https://github.com/ng2-ui/sortable#readme" 57 | } 58 | -------------------------------------------------------------------------------- /dist/sortable.directive.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/sortable.directive.ts"],"names":[],"mappings":"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","file":"sortable.directive.js","sourceRoot":""} -------------------------------------------------------------------------------- /src/sortable.directive.ts: -------------------------------------------------------------------------------- 1 | import {Component, ElementRef, ViewChild, Directive, ViewContainerRef, Output, EventEmitter} from '@angular/core' 2 | 3 | @Directive({ 4 | selector: '[ngui-sortable]' 5 | }) 6 | export class NguiSortableDirective { 7 | 8 | ulEl: HTMLElement; //
    9 | liEls: NodeListOf; //
  • 10 | draggingEl: HTMLElement; // LI element that are currently dragging 11 | elDragEnter: HTMLElement; // dragging element is over at this element 12 | order: string[]; // order of LI ids 13 | 14 | @Output() orderChanged = new EventEmitter(); 15 | 16 | constructor(public viewContainerRef: ViewContainerRef) { 17 | this.ulEl = this.viewContainerRef.element.nativeElement; 18 | } 19 | 20 | ngAfterViewInit(): void { 21 | this.liEls = this.ulEl.querySelectorAll('li'); 22 | for (var i = 0; i < this.liEls.length; i++) { 23 | var liEl = this.liEls[i]; 24 | // create a simple instance by default, it only adds horizontal recognizers 25 | var mc = new Hammer(liEl); 26 | // let the pan gesture support all directions. 27 | // this will block the vertical scrolling on a touch-device while on the element 28 | mc.get('pan').set({ direction: Hammer.DIRECTION_ALL }); 29 | 30 | mc.on('panstart', this.dragStartHandler); 31 | mc.on('panup pandown', this.dragHandler); 32 | mc.on('panend', this.dragEndHandler); 33 | 34 | this.emitOrderChanged(); 35 | } 36 | } 37 | 38 | dragStartHandler = event => { 39 | //console.log('dragStartHandler'); 40 | this.draggingEl = event.target; 41 | //noinspection TypeScriptUnresolvedFunction 42 | Object.assign(this.draggingEl.style, { 43 | zIndex: 3, 44 | pointerEvents: 'none' 45 | }); 46 | }; 47 | 48 | dragHandler = event => { 49 | //console.log('dragHandler'); 50 | //noinspection TypeScriptUnresolvedFunction 51 | Object.assign(this.draggingEl.style, { 52 | transform: 'translate(0px,' + event.deltaY + 'px)' 53 | }); 54 | 55 | var newElDragEnter = document.elementFromPoint(event.center.x, event.center.y); 56 | if (this.elDragEnter !== newElDragEnter) { 57 | if (this.elDragEnter) { // remove class 58 | this.elDragEnter.className = this.elDragEnter.className.replace(/\ drag-enter/g, ''); 59 | } 60 | this.elDragEnter = newElDragEnter; 61 | if (newElDragEnter.tagName === 'LI') { // add class 62 | newElDragEnter.className += ' drag-enter'; 63 | } 64 | } 65 | }; 66 | 67 | dragEndHandler = event => { 68 | //console.log('dragEndHandler'); 69 | //noinspection TypeScriptUnresolvedFunction 70 | Object.assign(this.draggingEl.style, { 71 | transform: 'translate(0,0)', 72 | zIndex: 1, 73 | pointerEvents: 'inherit' 74 | }); 75 | // remove class and drop the element 76 | if (this.elDragEnter) { 77 | this.elDragEnter.className = this.elDragEnter.className.replace(/\ drag-enter/g, ''); 78 | this.elDragEnter.parentNode.insertBefore(this.draggingEl, this.elDragEnter); 79 | this.emitOrderChanged(); 80 | } 81 | }; 82 | 83 | emitOrderChanged() { 84 | let liEls = this.ulEl.querySelectorAll('li'); 85 | var orders = Array.prototype.slice.call(liEls).map(el => el.id); 86 | this.orderChanged.emit(orders); 87 | } 88 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sortable 2 | 3 | Mobile-friendly re-arrangable list element 4 | 5 | ## IMPORTANT: NOT-MAINTAINED 6 | Accepting volunteers and ready to transfer ownership. 7 | 8 | 9 | 10 | DEMO 11 | 12 | 13 | 14 | ## Install 15 | 16 | 1. install @ngui/sortable node module 17 | 18 | $ npm install @ngui/sortable --save 19 | 20 | 2. add `map` and `packages` to your `systemjs.config.js` 21 | 22 | map['@ngui/sortable'] = 'node_modules/sortable/dist/sortable.umd.js'; 23 | 24 | 3. import NguiSortableModule to your AppModule 25 | 26 | import { NgModule } from '@angular/core'; 27 | import { FormsModule } from "@angular/forms"; 28 | import { BrowserModule } from '@angular/platform-browser'; 29 | import { AppComponent } from './app.component'; 30 | import { NguiSortableModule } from '@ngui/sortable'; 31 | 32 | @NgModule({ 33 | imports: [BrowserModule, FormsModule, NguiSortableModule], 34 | declarations: [AppComponent], 35 | bootstrap: [ AppComponent ] 36 | }) 37 | export class AppModule { } 38 | 39 | 40 | For full example, please check out `test` directory to see the example of; 41 | 42 | - `systemjs.config.js` 43 | - `app.module.ts` 44 | - and `app.component.ts`. 45 | 46 | ## Usage it in your code 47 | 48 | add `hammer.js` in your html 49 | 50 | 51 | 52 | You are ready. use it in your template 53 | 54 | 55 |
      56 |
    • Order
      • 57 |
    • Me
      • 58 | 59 |
    • The
      • 60 |
    • Into
      • 61 |
    • Put
      • 62 |
    63 | 64 | ## Without css, it still works, but for better styling, please use some css. e.g.; 65 | 66 | ul[ngui-sortable] { 67 | padding: 10px; 68 | border: 1px solid #ccc; 69 | list-style: none; 70 | display: block 71 | } 72 | ul[ngui-sortable] li { 73 | padding: 10px 5px; 74 | background: #4986e7; 75 | color: #fff; 76 | border: 1px solid #fff; 77 | display: block; 78 | position: relative 79 | } 80 | ul[ngui-sortable] li.drag-enter { 81 | border-top: 2px solid yellow; 82 | } 83 | 84 | ## For Developers 85 | 86 | Things to know to understand the implementation; 87 | 88 | 1. **transform: 'translate(x, y)'** 89 | 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.
    • 90 | 91 | 2. **document.elementFromPoint(x, y)** 92 | The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates. 93 | https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint 94 | 95 | 3. pan events(a gesture event) 96 | 97 | * event.center {Object} center position of the touches. contains pageX and pageY 98 | * event.deltaTime {Number} the total time of the touches in the screen 99 | * event.deltaX {Number} the delta on x axis we haved moved 100 | * event.deltaY {Number} the delta on y axis we haved moved 101 | -------------------------------------------------------------------------------- /dist/sortable.directive.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var core_1 = require("@angular/core"); 4 | var NguiSortableDirective = (function () { 5 | function NguiSortableDirective(viewContainerRef) { 6 | var _this = this; 7 | this.viewContainerRef = viewContainerRef; 8 | this.orderChanged = new core_1.EventEmitter(); 9 | this.dragStartHandler = function (event) { 10 | //console.log('dragStartHandler'); 11 | _this.draggingEl = event.target; 12 | //noinspection TypeScriptUnresolvedFunction 13 | Object.assign(_this.draggingEl.style, { 14 | zIndex: 3, 15 | pointerEvents: 'none' 16 | }); 17 | }; 18 | this.dragHandler = function (event) { 19 | //console.log('dragHandler'); 20 | //noinspection TypeScriptUnresolvedFunction 21 | Object.assign(_this.draggingEl.style, { 22 | transform: 'translate(0px,' + event.deltaY + 'px)' 23 | }); 24 | var newElDragEnter = document.elementFromPoint(event.center.x, event.center.y); 25 | if (_this.elDragEnter !== newElDragEnter) { 26 | if (_this.elDragEnter) { 27 | _this.elDragEnter.className = _this.elDragEnter.className.replace(/\ drag-enter/g, ''); 28 | } 29 | _this.elDragEnter = newElDragEnter; 30 | if (newElDragEnter.tagName === 'LI') { 31 | newElDragEnter.className += ' drag-enter'; 32 | } 33 | } 34 | }; 35 | this.dragEndHandler = function (event) { 36 | //console.log('dragEndHandler'); 37 | //noinspection TypeScriptUnresolvedFunction 38 | Object.assign(_this.draggingEl.style, { 39 | transform: 'translate(0,0)', 40 | zIndex: 1, 41 | pointerEvents: 'inherit' 42 | }); 43 | // remove class and drop the element 44 | if (_this.elDragEnter) { 45 | _this.elDragEnter.className = _this.elDragEnter.className.replace(/\ drag-enter/g, ''); 46 | _this.elDragEnter.parentNode.insertBefore(_this.draggingEl, _this.elDragEnter); 47 | _this.emitOrderChanged(); 48 | } 49 | }; 50 | this.ulEl = this.viewContainerRef.element.nativeElement; 51 | } 52 | NguiSortableDirective.prototype.ngAfterViewInit = function () { 53 | this.liEls = this.ulEl.querySelectorAll('li'); 54 | for (var i = 0; i < this.liEls.length; i++) { 55 | var liEl = this.liEls[i]; 56 | // create a simple instance by default, it only adds horizontal recognizers 57 | var mc = new Hammer(liEl); 58 | // let the pan gesture support all directions. 59 | // this will block the vertical scrolling on a touch-device while on the element 60 | mc.get('pan').set({ direction: Hammer.DIRECTION_ALL }); 61 | mc.on('panstart', this.dragStartHandler); 62 | mc.on('panup pandown', this.dragHandler); 63 | mc.on('panend', this.dragEndHandler); 64 | this.emitOrderChanged(); 65 | } 66 | }; 67 | NguiSortableDirective.prototype.emitOrderChanged = function () { 68 | var liEls = this.ulEl.querySelectorAll('li'); 69 | var orders = Array.prototype.slice.call(liEls).map(function (el) { return el.id; }); 70 | this.orderChanged.emit(orders); 71 | }; 72 | return NguiSortableDirective; 73 | }()); 74 | NguiSortableDirective.decorators = [ 75 | { type: core_1.Directive, args: [{ 76 | selector: '[ngui-sortable]' 77 | },] }, 78 | ]; 79 | /** @nocollapse */ 80 | NguiSortableDirective.ctorParameters = function () { return [ 81 | { type: core_1.ViewContainerRef, }, 82 | ]; }; 83 | NguiSortableDirective.propDecorators = { 84 | 'orderChanged': [{ type: core_1.Output },], 85 | }; 86 | exports.NguiSortableDirective = NguiSortableDirective; 87 | //# sourceMappingURL=sortable.directive.js.map -------------------------------------------------------------------------------- /dist/sortable.umd.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("@angular/core"), require("@angular/common"), require("@angular/forms")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["@angular/core", "@angular/common", "@angular/forms"], factory); 6 | else if(typeof exports === 'object') 7 | exports["sortable"] = factory(require("@angular/core"), require("@angular/common"), require("@angular/forms")); 8 | else 9 | root["sortable"] = factory(root["@angular/core"], root["@angular/common"], root["@angular/forms"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // identity function for calling harmony imports with the correct context 47 | /******/ __webpack_require__.i = function(value) { return value; }; 48 | /******/ 49 | /******/ // define getter function for harmony exports 50 | /******/ __webpack_require__.d = function(exports, name, getter) { 51 | /******/ if(!__webpack_require__.o(exports, name)) { 52 | /******/ Object.defineProperty(exports, name, { 53 | /******/ configurable: false, 54 | /******/ enumerable: true, 55 | /******/ get: getter 56 | /******/ }); 57 | /******/ } 58 | /******/ }; 59 | /******/ 60 | /******/ // getDefaultExport function for compatibility with non-harmony modules 61 | /******/ __webpack_require__.n = function(module) { 62 | /******/ var getter = module && module.__esModule ? 63 | /******/ function getDefault() { return module['default']; } : 64 | /******/ function getModuleExports() { return module; }; 65 | /******/ __webpack_require__.d(getter, 'a', getter); 66 | /******/ return getter; 67 | /******/ }; 68 | /******/ 69 | /******/ // Object.prototype.hasOwnProperty.call 70 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 71 | /******/ 72 | /******/ // __webpack_public_path__ 73 | /******/ __webpack_require__.p = ""; 74 | /******/ 75 | /******/ // Load entry module and return exports 76 | /******/ return __webpack_require__(__webpack_require__.s = 3); 77 | /******/ }) 78 | /************************************************************************/ 79 | /******/ ([ 80 | /* 0 */ 81 | /***/ (function(module, exports, __webpack_require__) { 82 | 83 | "use strict"; 84 | 85 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 86 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 87 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 88 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 89 | return c > 3 && r && Object.defineProperty(target, key, r), r; 90 | }; 91 | var __metadata = (this && this.__metadata) || function (k, v) { 92 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 93 | }; 94 | Object.defineProperty(exports, "__esModule", { value: true }); 95 | var core_1 = __webpack_require__(1); 96 | var NguiSortableDirective = (function () { 97 | function NguiSortableDirective(viewContainerRef) { 98 | var _this = this; 99 | this.viewContainerRef = viewContainerRef; 100 | this.orderChanged = new core_1.EventEmitter(); 101 | this.dragStartHandler = function (event) { 102 | //console.log('dragStartHandler'); 103 | _this.draggingEl = event.target; 104 | //noinspection TypeScriptUnresolvedFunction 105 | Object.assign(_this.draggingEl.style, { 106 | zIndex: 3, 107 | pointerEvents: 'none' 108 | }); 109 | }; 110 | this.dragHandler = function (event) { 111 | //console.log('dragHandler'); 112 | //noinspection TypeScriptUnresolvedFunction 113 | Object.assign(_this.draggingEl.style, { 114 | transform: 'translate(0px,' + event.deltaY + 'px)' 115 | }); 116 | var newElDragEnter = document.elementFromPoint(event.center.x, event.center.y); 117 | if (_this.elDragEnter !== newElDragEnter) { 118 | if (_this.elDragEnter) { 119 | _this.elDragEnter.className = _this.elDragEnter.className.replace(/\ drag-enter/g, ''); 120 | } 121 | _this.elDragEnter = newElDragEnter; 122 | if (newElDragEnter.tagName === 'LI') { 123 | newElDragEnter.className += ' drag-enter'; 124 | } 125 | } 126 | }; 127 | this.dragEndHandler = function (event) { 128 | //console.log('dragEndHandler'); 129 | //noinspection TypeScriptUnresolvedFunction 130 | Object.assign(_this.draggingEl.style, { 131 | transform: 'translate(0,0)', 132 | zIndex: 1, 133 | pointerEvents: 'inherit' 134 | }); 135 | // remove class and drop the element 136 | if (_this.elDragEnter) { 137 | _this.elDragEnter.className = _this.elDragEnter.className.replace(/\ drag-enter/g, ''); 138 | _this.elDragEnter.parentNode.insertBefore(_this.draggingEl, _this.elDragEnter); 139 | _this.emitOrderChanged(); 140 | } 141 | }; 142 | this.ulEl = this.viewContainerRef.element.nativeElement; 143 | } 144 | NguiSortableDirective.prototype.ngAfterViewInit = function () { 145 | this.liEls = this.ulEl.querySelectorAll('li'); 146 | for (var i = 0; i < this.liEls.length; i++) { 147 | var liEl = this.liEls[i]; 148 | // create a simple instance by default, it only adds horizontal recognizers 149 | var mc = new Hammer(liEl); 150 | // let the pan gesture support all directions. 151 | // this will block the vertical scrolling on a touch-device while on the element 152 | mc.get('pan').set({ direction: Hammer.DIRECTION_ALL }); 153 | mc.on('panstart', this.dragStartHandler); 154 | mc.on('panup pandown', this.dragHandler); 155 | mc.on('panend', this.dragEndHandler); 156 | this.emitOrderChanged(); 157 | } 158 | }; 159 | NguiSortableDirective.prototype.emitOrderChanged = function () { 160 | var liEls = this.ulEl.querySelectorAll('li'); 161 | var orders = Array.prototype.slice.call(liEls).map(function (el) { return el.id; }); 162 | this.orderChanged.emit(orders); 163 | }; 164 | return NguiSortableDirective; 165 | }()); 166 | __decorate([ 167 | core_1.Output(), 168 | __metadata("design:type", Object) 169 | ], NguiSortableDirective.prototype, "orderChanged", void 0); 170 | NguiSortableDirective = __decorate([ 171 | core_1.Directive({ 172 | selector: '[ngui-sortable]' 173 | }), 174 | __metadata("design:paramtypes", [core_1.ViewContainerRef]) 175 | ], NguiSortableDirective); 176 | exports.NguiSortableDirective = NguiSortableDirective; 177 | 178 | 179 | /***/ }), 180 | /* 1 */ 181 | /***/ (function(module, exports) { 182 | 183 | module.exports = __WEBPACK_EXTERNAL_MODULE_1__; 184 | 185 | /***/ }), 186 | /* 2 */ 187 | /***/ (function(module, exports, __webpack_require__) { 188 | 189 | "use strict"; 190 | 191 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 192 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 193 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 194 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 195 | return c > 3 && r && Object.defineProperty(target, key, r), r; 196 | }; 197 | Object.defineProperty(exports, "__esModule", { value: true }); 198 | var core_1 = __webpack_require__(1); 199 | var forms_1 = __webpack_require__(5); 200 | var common_1 = __webpack_require__(4); 201 | var sortable_directive_1 = __webpack_require__(0); 202 | var NguiSortableModule = (function () { 203 | function NguiSortableModule() { 204 | } 205 | return NguiSortableModule; 206 | }()); 207 | NguiSortableModule = __decorate([ 208 | core_1.NgModule({ 209 | imports: [common_1.CommonModule, forms_1.FormsModule], 210 | declarations: [sortable_directive_1.NguiSortableDirective], 211 | exports: [sortable_directive_1.NguiSortableDirective] 212 | }) 213 | ], NguiSortableModule); 214 | exports.NguiSortableModule = NguiSortableModule; 215 | 216 | 217 | /***/ }), 218 | /* 3 */ 219 | /***/ (function(module, exports, __webpack_require__) { 220 | 221 | "use strict"; 222 | 223 | Object.defineProperty(exports, "__esModule", { value: true }); 224 | var sortable_directive_1 = __webpack_require__(0); 225 | exports.NguiSortableDirective = sortable_directive_1.NguiSortableDirective; 226 | var sortable_module_1 = __webpack_require__(2); 227 | exports.NguiSortableModule = sortable_module_1.NguiSortableModule; 228 | 229 | 230 | /***/ }), 231 | /* 4 */ 232 | /***/ (function(module, exports) { 233 | 234 | module.exports = __WEBPACK_EXTERNAL_MODULE_4__; 235 | 236 | /***/ }), 237 | /* 5 */ 238 | /***/ (function(module, exports) { 239 | 240 | module.exports = __WEBPACK_EXTERNAL_MODULE_5__; 241 | 242 | /***/ }) 243 | /******/ ]); 244 | }); 245 | //# sourceMappingURL=sortable.umd.js.map -------------------------------------------------------------------------------- /dist/sortable.umd.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap adc664efe0686d30aa71","webpack:///./src/sortable.directive.ts","webpack:///external \"@angular/core\"","webpack:///./src/sortable.module.ts","webpack:///./src/index.ts","webpack:///external \"@angular/common\"","webpack:///external \"@angular/forms\""],"names":[],"mappings":"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","file":"sortable.umd.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"@angular/core\"), require(\"@angular/common\"), require(\"@angular/forms\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"@angular/core\", \"@angular/common\", \"@angular/forms\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"sortable\"] = factory(require(\"@angular/core\"), require(\"@angular/common\"), require(\"@angular/forms\"));\n\telse\n\t\troot[\"sortable\"] = factory(root[\"@angular/core\"], root[\"@angular/common\"], root[\"@angular/forms\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 3);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap adc664efe0686d30aa71","import {Component, ElementRef, ViewChild, Directive, ViewContainerRef, Output, EventEmitter} from '@angular/core'\n\n@Directive({\n selector: '[ngui-sortable]'\n})\nexport class NguiSortableDirective {\n\n ulEl: HTMLElement; //
      \n liEls: NodeListOf; //
    • \n draggingEl: HTMLElement; // LI element that are currently dragging\n elDragEnter: HTMLElement; // dragging element is over at this element\n order: string[]; // order of LI ids\n\n @Output() orderChanged = new EventEmitter();\n\n constructor(public viewContainerRef: ViewContainerRef) {\n this.ulEl = this.viewContainerRef.element.nativeElement;\n }\n\n ngAfterViewInit(): void {\n this.liEls = this.ulEl.querySelectorAll('li');\n for (var i = 0; i < this.liEls.length; i++) {\n var liEl = this.liEls[i];\n // create a simple instance by default, it only adds horizontal recognizers\n var mc = new Hammer(liEl);\n // let the pan gesture support all directions.\n // this will block the vertical scrolling on a touch-device while on the element\n mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });\n\n mc.on('panstart', this.dragStartHandler);\n mc.on('panup pandown', this.dragHandler);\n mc.on('panend', this.dragEndHandler);\n\n this.emitOrderChanged();\n }\n }\n\n dragStartHandler = event => {\n //console.log('dragStartHandler');\n this.draggingEl = event.target;\n //noinspection TypeScriptUnresolvedFunction\n Object.assign(this.draggingEl.style, {\n zIndex: 3,\n pointerEvents: 'none'\n });\n };\n\n dragHandler = event => {\n //console.log('dragHandler');\n //noinspection TypeScriptUnresolvedFunction\n Object.assign(this.draggingEl.style, {\n transform: 'translate(0px,' + event.deltaY + 'px)'\n });\n\n var newElDragEnter = document.elementFromPoint(event.center.x, event.center.y);\n if (this.elDragEnter !== newElDragEnter) {\n if (this.elDragEnter) { // remove class\n this.elDragEnter.className = this.elDragEnter.className.replace(/\\ drag-enter/g, '');\n }\n this.elDragEnter = newElDragEnter;\n if (newElDragEnter.tagName === 'LI') { // add class\n newElDragEnter.className += ' drag-enter';\n }\n }\n };\n\n dragEndHandler = event => {\n //console.log('dragEndHandler');\n //noinspection TypeScriptUnresolvedFunction\n Object.assign(this.draggingEl.style, {\n transform: 'translate(0,0)',\n zIndex: 1,\n pointerEvents: 'inherit'\n });\n // remove class and drop the element\n if (this.elDragEnter) {\n this.elDragEnter.className = this.elDragEnter.className.replace(/\\ drag-enter/g, '');\n this.elDragEnter.parentNode.insertBefore(this.draggingEl, this.elDragEnter);\n this.emitOrderChanged();\n }\n };\n\n emitOrderChanged() {\n let liEls = this.ulEl.querySelectorAll('li');\n var orders = Array.prototype.slice.call(liEls).map(el => el.id);\n this.orderChanged.emit(orders);\n }\n}\n\n\n// WEBPACK FOOTER //\n// ./~/angular2-template-loader!./~/strip-loader/lib?strip[]=debug,strip[]=console.log!./src/sortable.directive.ts","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"@angular/core\"\n// module id = 1\n// module chunks = 0","import { NgModule } from '@angular/core';\nimport { FormsModule } from \"@angular/forms\";\nimport { CommonModule } from '@angular/common';\n\nimport { NguiSortableDirective } from './sortable.directive';\n\n@NgModule({\n imports: [ CommonModule, FormsModule ],\n declarations: [NguiSortableDirective],\n exports: [ NguiSortableDirective ]\n})\nexport class NguiSortableModule {}\n\n\n\n\n// WEBPACK FOOTER //\n// ./~/angular2-template-loader!./~/strip-loader/lib?strip[]=debug,strip[]=console.log!./src/sortable.module.ts","import { NguiSortableDirective } from './sortable.directive';\nimport { NguiSortableModule } from './sortable.module';\n\nexport { NguiSortableDirective, NguiSortableModule };\n\n\n\n\n// WEBPACK FOOTER //\n// ./~/angular2-template-loader!./~/strip-loader/lib?strip[]=debug,strip[]=console.log!./src/index.ts","module.exports = __WEBPACK_EXTERNAL_MODULE_4__;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"@angular/common\"\n// module id = 4\n// module chunks = 0","module.exports = __WEBPACK_EXTERNAL_MODULE_5__;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"@angular/forms\"\n// module id = 5\n// module chunks = 0"],"sourceRoot":""} --------------------------------------------------------------------------------