angular-legacy-sortablejs-maintained

Angular (legacy) directive for SortableJS.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-legacy-sortablejs-maintained
0.6.24 years ago5 years agoMinified + gzip package size for angular-legacy-sortablejs-maintained in KB

Readme

angular-legacy-sortable

Angular 1 module that integrates with Sortable.js
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

angular.module('exampleApp', ['ng-sortable'])
.component('dragAndDropExample', {
  template: `<ul ng-sortable>
    <li ng-repeat="item in ['burgers', 'chips', 'hotdog']">
      {$ item $}
    </li>
  </ul>`,
})

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
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,
        };
      }
    },
  });
Drag handle
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,
        };
      }
    },
  });
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
npm run serve:example

npm run webdriver

npm run test:e2e