<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 & 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;
}
}
View Compiled
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!' }
];
}]);
This Pen doesn't use any external CSS resources.