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: classExampleController{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: classExampleController{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:examplenpm run webdrivernpm run test:e2e