Create a sortable controller using Angular JS - Glenn Smith [PDF]

Glenn Smith

Create a sortable controller using Angular JS 19 Oct 2015 Home / Create a sortable controller using Angular JS

If like me you want to add the jQuery UI sortable functionally to your Angular JS application then you can do this by using a controller in angular. This controller will setup the sortable functionally you need and you can use it just how you would when using the jQuery UI code.

The HTML The HTML below is the base of our Angular JS appliation this calls in jQuery, jQuery UI, Angular JS, UI Sortable & our custom js file which will later house our Angular JS controller code.

You may notice on the html tag we are referencing two Angular JS tags ng-app & ng-controller. Let go ahead and setup the ng-app tag. In our custom js file add the following code. This give creates our application a namespace and tell it we want to include UI sortable.

The controller This controller allows us to setup our sortable functionally and assign a div handle which you can hover over and click and drag to a new order. Add the following code to our custom js file.

Using the sortable UI functionally To start using the sortable functionally simply use the following HTML code within the body of your Angular JS application. Whatever you put between the li tags will now be sortable.

Create a sortable controller using Angular Source : https://github.com/angular-ui/ui-sortable

Glenn Smith

© 2017, All Rights Reserved - Glenn Smith Follow @g13nnsmith