AngularJS (legacy) directive for SortableJS.
Latest commit 3693e09 Nov 23, 2016 @RubaXa RubaXa committed on GitHub Merge pull request #21 from ViktorMelnyk/master
feature/added compatibility with dir-paginate

README.md

angular-legacy-sortable

Angular 1 module that integrates with Sortable.js

Installation

Install with NPM

    npm install angular-legacy-sortablejs

Examples

Simple Drag and Drop

angular.module('exampleApp', [])
.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', [])
.component('dragAndDropExample', {
    template: `<ul ng-sortable=$ctrl.sortableConf>
        <li ng-repeat="item in ['burgers', 'chips', 'hotdog']">
            {$ item $}
        </li>
    </ul>`,
    controller: function AppSidebarController() {
    var ctrl = this;
        ctrl.sortableConf = {
                animation: 350,
                chosenClass: 'sortable-chosen',
                forceFallback: true,
        };
    },
})

Drag handle

Example showing how use the handle option

angular.module('exampleApp', [])
.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: function AppSidebarController() {
    var ctrl = this;
        ctrl.sortableConf = {
                animation: 350,
                chosenClass: 'sortable-chosen',
                handle: '.grab-handle',
                forceFallback: true,
        };
    },
})