Angular 1 module that integrates with Sortable.js
npm install angular-legacy-sortablejs-maintained
yarn add angular-legacy-sortablejs-maintained
Don't install the old angular-legacy-sortablejs package as thats not maintained
angular.module('exampleApp', ['ng-sortable']) .component('dragAndDropExample', { template: `<ul ng-sortable> <li ng-repeat="item in ['burgers', 'chips', 'hotdog']"> {$ item $} </li> </ul>`, })
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
angular.module('exampleApp', ['ng-sortable']) .component('dragAndDropExample', { template: ` <ul ng-sortable=$ctrl.sortableConf> <li ng-repeat="item in ['burgers', 'chips', 'hotdog']"> {$ item $} </li> </ul>`, controller: class ExampleController { constructor() { this.sortableConf = { animation: 350, chosenClass: 'sortable-chosen', handle: '.grab-handle', forceFallback: true, }; } }, });
Example showing how use the handle option
angular.module('exampleApp', ['ng-sortable']) .component('dragAndDropExample', { template: ` <ul ng-sortable=$ctrl.sortableConf> <li ng-repeat="item in ['burgers', 'chips', 'hotdog']" draggable="false"> <span class="grab-handle">Drag Header</span> <div>{$ item $}</div> </li> </ul>`, controller: class ExampleController { constructor() { this.sortableConf = { animation: 350, chosenClass: 'sortable-chosen', handle: '.grab-handle', forceFallback: true, }; } }, });
There are selenium based tests that can be used to check for regressions
- node
- yarn
Navigate to the repo directory in a terminal and run
yarn
To run the e2e tests run each of these commands in a separate terminal window
npm run serve:example
npm run webdriver
npm run test:e2e