Hello folks,
In this blog I am going to give example to apply drag-drop sorting in visualforce page with use of angularJs.
Lets start with creatting basic Html template to host our app. We will use the ng-app and ng-controller directives to link up the body tag to our Angular application. At the bottom we will include our required libraries.
Prerequisite:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.15.0/sortable.min.js"></script>
In this code we define an Angular module and name it ngApp, and include the ui.sortable in the requires parameter. This ui.sortable is what wires up angular-ui-sortable to our module. We also define the controller called myController for our module and inject the Angular $scope object. This is where we will set up our Angular sortable.
<script >
var ngApp = angular.module('myNgApp', ['ui.sortable']);
ngApp.controller('myController', function ($scope) {
$scope.names = [ "Test1", "Test2", "Test3" ];
});
</script>
Now lets use this $scope name variable to display data in Ul by adding ng-model Directive on it and ng-repeat to loop over array. To make this list sortable, all we need to do is use the ui-sortable directive.
<ul ui-sortable="sortableOptions" ng-model="names">
<li ng-repeat="person in people" class="list-group-item">{{name}}</li>
</ul>
To see this in action let’s add a pre element and bind it to the people array that will show the order of array in real time.
<pre>{{names}}</pre>
Final code will look like below.
<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
<apex:slds />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/
jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/
angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/
0.15.0/sortable.min.js"></script>
<script>
var ngApp = angular.module('ngApp', ['ui.sortable']);
ngApp.controller('myController', function ($scope) {
$scope.names = [ "Test1", "Test2", "Test3" ];
});
</script>
<body ng-app="ngApp" ng-controller="myController">
<article class="slds-card">
<div class="slds-card__header slds-grid">
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);"
class="slds-card__header-link slds-truncate" title="Names">
<span>Name List</span>
</a>
</h2>
</div>
</div>
<div class="slds-card__body slds-card__body_inner">
<ul ui-sortable="sortableOptions" ng-model="names"
class="slds-has-dividers_top-space">
<li ng-repeat="name in names " class="slds-item">{{name}}</li>
</ul>
<pre>{{names}}</pre>
</div>
</article>
</body>
</apex:page>
Output:
Hope it will help. Let me know your comments.
