Neurotic Pantaloon Maker

    angular-legacy-sortablejs-maintained

    0.6.2 • Public • Published

    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

    Install

    npm i angular-legacy-sortablejs-maintained

    DownloadsWeekly Downloads

    2,085

    Version

    0.6.2

    License

    MIT

    Unpacked Size

    188 kB

    Total Files

    14

    Last publish

    Collaborators

    • samjacobclift