<div ng-app="myApp" ng-controller="demo">

  <div id="container">
    <h1><i class="main-icon fa fa-arrows-alt"></i></h1>
    <h1>Angular + Sortable</h1>
    <h4>Drag em &amp; drop em</h4>
    
    <br /><br />
    
    <!-- ng-sortable -->
    <ul ng-sortable="{animation:300,handle: '.handle',ghostClass:'ghost'}">
      <li ng-repeat="item in items">
        <div class="handle">
          <i class="fa fa-reorder fa-lg"></i>
        </div>
        <div class="text">
          <input type="text" ng-model="item.name" />
        </div>
      </li>
    </ul>
    
    <pre>{{ items | json }}</pre>
    
    <br />
    
    <footer>
      <i class="fa fa-github-alt"></i>
      Me playing around with <a href="https://github.com/RubaXa/Sortable">Sortable</a>
    </footer>
    
  </div>
    
</div>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500,600);

// colors
$darker: #2f3343;
$dark: #3f4354;
$mid: #646b88;
$light2: #b3c4d9;
$light: #fefefe;
$yellow: #ffc600;
$red: #ff005a;

body {
  background: $dark;
  font-size: 18px;
  font-family: 'Raleway', serif;
  color: $mid;
}
h1 {
  color: $yellow;
  text-align: center;
  font-weight: 300;
  margin-bottom: 0;
}
h4 {
  text-align: center;
  font-weight: 300;
  margin-bottom: 0;
}
#container {
  position: relative;
  width: 75%;
  min-width: 750px;
  margin: 5em auto 2em;
}
pre {
  float: left;
  width: 48%;
  font-size: 0.95em;
  background: $dark;
  border: 2px solid $mid;
  padding: 2em 1em;
  margin: 1.5em 0 0;
  @include box-sizing(border-box);
  @include box-shadow($darker 7px 8px 0px 1px);
}
ul {
  float: left;
  width: 48%;
  background: $dark;
  border: 2px solid $mid;
  padding: 0;
  margin: 1.5em 4% 0 0;
  @include box-sizing(border-box);
  @include box-shadow($darker 7px 8px 0px 1px);
}
.ghost {
  display: block;
  opacity: 1;
  color: $mid;
  border: 2px dashed $mid;
}
li {
  color: $light2;
  background: $dark;
  list-style: none;
  margin: .9em;
  border: 2px dashed $dark;
  @include box-sizing(border-box);
  @include transition;
  &:after {
    content:'';
    clear: both;
    display: block;
  }
  .handle, .text {
    line-height: 3.5em;
    @include box-sizing(border-box);
    padding: 0 1.5em;
    float: left;
  }
  .handle {
    clear: left;
  }
  .text input {
    background: $dark;
    border: none;
    outline: none;
    padding: 0; margin: 0;
  }
  .handle {
    cursor: move;
  }
}
footer {
  line-height: 7em;
  margin-top: 2em;
  text-align: center;
  a {
    color: $yellow;
  }
}

angular.module('myApp', ['ng-sortable'])
    .controller('demo', ['$scope', function ($scope) {
      
        $scope.items = [
          { 'name' : 'This is a list item' },
          { 'name' : 'Here is Another' },
          { 'name' : 'Click on em to edit!' }
        ];
      
    }]);