Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

AngularJS (legacy) directive for SortableJS.

NotificationsYou must be signed in to change notification settings

SortableJS/angular-legacy-sortablejs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 tong-sortable and it will pass this onto the created sortable object. The available options can be foundhere

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,};}},});

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>Drag Header</span>        <div>{$ item $}</div>      </li>   </ul>`,controller:classExampleController{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

About

AngularJS (legacy) directive for SortableJS.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors6


[8]ページ先頭

©2009-2025 Movatter.jp