drag and drop feature in AngularJs

Update : Here is simple working example : Plunker

Just follow the steps which this link mentioend.

Step 1 : Make sure to load the scripts in your html

<script type="text/javascript" src="dist/ng-sortable.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/ng-sortable.min.css">

<!-- OPTIONAL: default style -->
<link rel="stylesheet" type="text/css" href="dist/ng-sortable.style.min.css">

Step 2 : And Inject the sortable module as dependency

angular.module('xyzApp', ['as.sortable', '....']);

Step 3 : Invoke the Directives using below html structure

Html

<ul data-as-sortable="board.dragControlListeners" data-ng-model="items">
   <li data-ng-repeat="item in items" data-as-sortable-item>
      <div data-as-sortable-item-handle></div>
   </li>
</ul>

Step 4 : Define your callbacks in the invoking controller

JS

$scope.dragControlListeners = {
    accept: function (sourceItemHandleScope, destSortableScope) {return boolean}//override to determine drag is allowed or not. default is true.
    itemMoved: function (event) {//Do what you want},
    orderChanged: function(event) {//Do what you want},
    containment: '#board'//optional param.
    clone: true //optional param for clone feature.
    allowDuplicates: false //optional param allows duplicates to be dropped.
};

$scope.dragControlListeners1 = {
        containment: '#board'//optional param.
        allowDuplicates: true //optional param allows duplicates to be dropped.
};

And you can inspect the exact example you have mentioned above by using F12 Key.