Angular dndLists Test

by Santiago J

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/1.4.0/angular-drag-and-drop-lists.min.js"></script>
<div ng-app="sandbox">
  <div ng-controller="TestCtrl as ctrl">
    <div class="list" dnd-list="ctrl.list">
      <div class="item"
          ng-repeat="item in ctrl.list"
          dnd-draggable="item"
          dnd-moved="ctrl.list.splice($index, 1)"
          dnd-effect-allowed="move">
        {{item.text}}
      </div>  
    </div>
  </div>
</div>

CSS

.list {
  border: 1px solid rgba(0,0,0,0.5);
  position: relative;
}

.item {
  background-color: white;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5);
  margin: 0.5em;
  padding: 0.5em;
  position: relative;
}

JavaScript

angular
  .module('sandbox', ['ngMaterial', 'dndLists'])
  .controller('TestCtrl', function() {
    this.list = [1,2,3,4,5].map(n => ({id: n, text: 'item ' + n}));
  });