├── .gitignore
├── LICENSE.md
├── README.md
├── app
    ├── app.component.ts
    ├── build
    │   ├── app.js
    │   └── app.js.map
    ├── index.html
    ├── main.ts
    └── webpack.config.js
├── dist
    ├── index.d.ts
    ├── index.js
    ├── index.js.map
    ├── index.metadata.json
    ├── sortable.directive.d.ts
    ├── sortable.directive.js
    ├── sortable.directive.js.map
    ├── sortable.directive.metadata.json
    ├── sortable.module.d.ts
    ├── sortable.module.js
    ├── sortable.module.js.map
    ├── sortable.module.metadata.json
    ├── sortable.umd.js
    └── sortable.umd.js.map
├── package.json
├── src
    ├── index.ts
    ├── sortable.directive.ts
    └── sortable.module.ts
├── tsconfig.json
├── tsconfig.ngc.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | typings
3 | *.log
4 | *.tgz
5 | .idea 
6 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) 2016 Allen Kim <allenhwkim@gmail.com>
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.


--------------------------------------------------------------------------------
/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 | <a href="https://rawgit.com/ng2-ui/sortable/master/app/index.html">
 10 |   DEMO
 11 |   <!-- img src="http://i.imgur.com/0qcxg8X.png" width="50% border="1" / -->
 12 | </a>
 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 |     <script src="../node_modules/hammerjs/hammer.js"></script>
 51 |   
 52 | You are ready. use it in your template
 53 | 
 54 | 
 55 |     <ul ngui-sortable>
 56 |       <li id="order">Order</li>
 57 |       <li id="me">Me</li>
 58 |       <li id="right">Right</li>
 59 |       <li id="the">The</li>
 60 |       <li id="into">Into</li>
 61 |       <li id="put">Put</li>
 62 |     </ul>
 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.</li>
 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 | 


--------------------------------------------------------------------------------
/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core'
 2 | 
 3 | @Component({
 4 |   selector: 'my-app',
 5 |   template: `
 6 |     <ul ngui-sortable>
 7 |       <li id="order">Order</li>
 8 |       <li id="me">Me</li>
 9 |       <li id="right">Right</li>
10 |       <li id="the">The</li>
11 |       <li id="into">Into</li>
12 |       <li id="put">Put</li>
13 |     </ul>`,
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 | 


--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Angular2 Npm Package Example</title>
 5 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
 6 | </head>
 7 | 
 8 | <body>
 9 |   <my-app>Loading...</my-app>
10 |   <script>
11 |     document.write('<base href="' + document.location + '" />');
12 | 
13 |     var script = document.createElement("script");
14 |     script.src = location.pathname.replace('index.html', '') + 'build/app.js';
15 |     (document.body).appendChild(script);
16 |   </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/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/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/index.d.ts:
--------------------------------------------------------------------------------
1 | import { NguiSortableDirective } from './sortable.directive';
2 | import { NguiSortableModule } from './sortable.module';
3 | export { NguiSortableDirective, NguiSortableModule };
4 | 


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


--------------------------------------------------------------------------------
/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.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"}}}]


--------------------------------------------------------------------------------
/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<Element>;
 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 | 


--------------------------------------------------------------------------------
/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.directive.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../src/sortable.directive.ts"],"names":[],"mappings":"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","file":"sortable.directive.js","sourceRoot":""}


--------------------------------------------------------------------------------
/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"}]}}}}]


--------------------------------------------------------------------------------
/dist/sortable.module.d.ts:
--------------------------------------------------------------------------------
1 | export declare class NguiSortableModule {
2 | }
3 | 


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


--------------------------------------------------------------------------------
/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/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"}]}]}]}}}]


--------------------------------------------------------------------------------
/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;     // <ul>\n  liEls: NodeListOf<Element>;     // <li> <li>\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 = <HTMLElement>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 = <HTMLLIElement>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":""}


--------------------------------------------------------------------------------
/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 <allenhwkim@gmail.com>",
53 |   "bugs": {
54 |     "url": "https://github.com/ng2-ui/sortable/issues"
55 |   },
56 |   "homepage": "https://github.com/ng2-ui/sortable#readme"
57 | }
58 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { NguiSortableDirective } from './sortable.directive';
2 | import { NguiSortableModule } from './sortable.module';
3 | 
4 | export { NguiSortableDirective, NguiSortableModule };
5 | 
6 | 


--------------------------------------------------------------------------------
/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;     // <ul>
 9 |   liEls: NodeListOf<Element>;     // <li> <li>
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 = <HTMLElement>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 = <HTMLLIElement>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 | }


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


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


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


--------------------------------------------------------------------------------