https://github.com/ng2-ui/sortable

An example of how to pakcage a Angular2 project into a bundle
https://github.com/ng2-ui/sortable

Last synced: 8 days ago
JSON representation

An example of how to pakcage a Angular2 project into a bundle

• Host: GitHub
• URL: https://github.com/ng2-ui/sortable
• Owner: ng2-ui
• License: mit
• Created: 2016-03-27T21:02:45.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-12-18T15:23:29.000Z (almost 7 years ago)
• Last Synced: 2024-09-28T00:28:37.126Z (about 1 month ago)
• Language: TypeScript
• Size: 1.43 MB
• Stars: 10
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-angular-components - ng2-ui-sortable - Mobile-friendly re-arrangable list element (Uncategorized / Uncategorized)

README

        
# sortable

Mobile-friendly re-arrangable list element

## IMPORTANT: NOT-MAINTAINED

Accepting volunteers and ready to transfer ownership.



  DEMO

  



## Install

1. install @ngui/sortable node module

        $ npm install @ngui/sortable --save

2. add `map` and `packages` to your `systemjs.config.js`

        map['@ngui/sortable'] = 'node_modules/sortable/dist/sortable.umd.js';

3. import NguiSortableModule to your AppModule

        import { NgModule } from '@angular/core';

        import { FormsModule } from "@angular/forms";

        import { BrowserModule  } from '@angular/platform-browser';

        import { AppComponent } from './app.component';

        import { NguiSortableModule } from '@ngui/sortable';

        

        @NgModule({

          imports: [BrowserModule, FormsModule, NguiSortableModule],

          declarations: [AppComponent],

          bootstrap: [ AppComponent ]

        })

        export class AppModule { }

For full example, please check out `test` directory to see the example of;

  - `systemjs.config.js`

  - `app.module.ts`

  -  and `app.component.ts`.

## Usage it in your code

add `hammer.js` in your html

    

  

You are ready. use it in your template

    


      
Order

      
Me

      
Right

      
The

      
Into

      
Put

    


## Without css, it still works, but for better styling, please use some css. e.g.;

    ul[ngui-sortable] {

       padding: 10px; 

       border: 1px solid #ccc;

      list-style: none; 

      display: block

    }

    ul[ngui-sortable] li {

      padding: 10px 5px;

      background: #4986e7;

      color: #fff; 

      border: 1px solid #fff;

      display: block; 

      position: relative

    }

    ul[ngui-sortable] li.drag-enter {

      border-top: 2px solid yellow;

    }

## For Developers

  Things to know to understand the implementation;

  

  1.  **transform: 'translate(x, y)'**   

      when  drag an element. which sets the position of an element to a new one, described by two vectors (x, y). The y value is optional.

      

  2. **document.elementFromPoint(x, y)**   

      The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates.

      https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint

  

  3. pan events(a gesture event)

  

      * event.center     {Object}  center position of the touches. contains pageX and pageY

      * event.deltaTime  {Number}  the total time of the touches in the screen

      * event.deltaX     {Number}  the delta on x axis we haved moved

      * event.deltaY     {Number}  the delta on y axis we haved moved