https://github.com/sortablejs/angular-legacy-sortablejs
AngularJS (legacy) directive for SortableJS.
https://github.com/sortablejs/angular-legacy-sortablejs
Last synced: 3 months ago
JSON representation
AngularJS (legacy) directive for SortableJS.
- Host: GitHub
- URL: https://github.com/sortablejs/angular-legacy-sortablejs
- Owner: SortableJS
- Created: 2016-07-05T05:42:39.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T01:03:17.000Z (over 2 years ago)
- Last Synced: 2025-03-05T17:49:08.873Z (4 months ago)
- Language: JavaScript
- Size: 145 KB
- Stars: 50
- Watchers: 5
- Forks: 48
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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](https://example-angularjs-sortable.glitch.me/)
## Simple Drag and Drop
```js
angular.module('exampleApp', ['ng-sortable'])
.component('dragAndDropExample', {
template: `
-
{$ item $}
})
```
## 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](https://github.com/RubaXa/Sortable#options)
```js
angular.module('exampleApp', ['ng-sortable'])
.component('dragAndDropExample', {
template: `
-
{$ item $}
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
```js
angular.module('exampleApp', ['ng-sortable'])
.component('dragAndDropExample', {
template: `
-
Drag Header
{$ item $}
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
```bash
npm run serve:example
```
```bash
npm run webdriver
```
```bash
npm run test:e2e
```