Angular directive D&D

Faire du Drag&Drop avec angular pour frangular

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<!doctype html>
<html lang="en">

<head>
 <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 src="app.js"></script>
 <meta charset="utf-8">
 <title>My App</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
</head>
<body ng-app="myApp" ng-controller="myController">

 <div class="container">
  <h2>People</h2>
   <ul ui-sortable="sortableOptions" class="list-group">
    <li ng-repeat="person in people" class="list-group-item">{{person}}</li>
   </ul>
   <pre>{{people}}</pre>
 </div>


</body>
</html>

JavaScript

var myapp = angular.module('myApp', ['ui.sortable']);

myapp.controller('myController', ['$scope', function($scope) {

 // people array
 $scope.people = ["John","Fred","Teddy","Deloris","Brian"];

 // set up sortable options
 $scope.sortableOptions = {
   stop: function(e, ui) {
     // do something here
   }
 };
}]);