Installation

Install with NPM

npm install angular-legacy-sortablejs-maintained

Install with Yarn

yarn add angular-legacy-sortablejs-maintained

Don't install the old angular-legacy-sortablejs package as thats not maintained

Examples

Live Demo

Simple Drag and Drop

``js angular.module('exampleApp', ['ng-sortable']) .component('dragAndDropExample', { template:

{$ item $}

,
})


Specifying a Config

You can pass a Config obj to

ng-sortable and it will pass this onto the created sortable object. The available options can be found here

`js angular.module('exampleApp', ['ng-sortable']) .component('dragAndDropExample', { template:

{$ item $}

,
    controller: class ExampleController {
      constructor() {
        this.sortableConf = {
          animation: 350,
          chosenClass: 'sortable-chosen',
          handle: '.grab-handle',
          forceFallback: true,
        };
      }
    },
  });


Drag handle

Example showing how use the handle option

`js angular.module('exampleApp', ['ng-sortable']) .component('dragAndDropExample', { template:

Drag Header

{$ item $}

,
   controller: class ExampleController {
      constructor() {
        this.sortableConf = {
          animation: 350,
          chosenClass: 'sortable-chosen',
          handle: '.grab-handle',
          forceFallback: true,
        };
      }
    },
  });


Tests

There are selenium based tests that can be used to check for regressions
Requirements

  - node
  - yarn
Setting up tests

Navigate to the repo directory in a terminal and run
    yarn
Running e2e tests
To run the e2e tests run each of these commands in a separate terminal window

`bash npm run serve:example`

`bash npm run webdriver`

`bash npm run test:e2e``

Simple Drag and Drop

js
angular.module('exampleApp', ['ng-sortable'])
.component('dragAndDropExample', {
  template:

{$ item $}

,
})

Specifying a Config

You can pass a Config obj to

and it will pass this onto the created sortable object. The available options can be found here

js
angular.module('exampleApp', ['ng-sortable'])
  .component('dragAndDropExample', {
    template:

{$ item $}

,
controller: class ExampleController {
constructor() {
this.sortableConf = {
animation: 350,
chosenClass: 'sortable-chosen',
handle: '.grab-handle',
forceFallback: true,
};
}
},
});

Drag handle

Example showing how use the handle option

js
angular.module('exampleApp', ['ng-sortable'])
  .component('dragAndDropExample', {
    template:

Drag Header

{$ item $}

,
controller: class ExampleController {
constructor() {
this.sortableConf = {
animation: 350,
chosenClass: 'sortable-chosen',
handle: '.grab-handle',
forceFallback: true,
};
}
},
});

Tests

There are selenium based tests that can be used to check for regressions

Requirements

- node
- yarn

Setting up tests

Navigate to the repo directory in a terminal and run

yarn

Running e2e tests

To run the e2e tests run each of these commands in a separate terminal window

bash
npm run serve:example

bash
npm run webdriver

bash
npm run test:e2e