<!DOCTYPE html>
<html lang="en" ng-app="BlankApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body ng-cloak ng-controller="MainCtrl">
<div ng-cloak layout-gt-sm="row" layout="column">
<div flex-gt-sm="50" flex>
<md-toolbar layout="row" class="md-hue-3">
<div class="md-toolbar-tools">
<span>Sortable View</span>
</div>
</md-toolbar>
<md-content sv-root>
<md-list flex sv-part="todos">
<md-subheader class="md-no-sticky">3 line item (with hover)</md-subheader>
<md-list-item class="md-3-line" sv-element ng-repeat="item in todos" ng-click="null">
<img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
<div class="md-list-item-text" layout="column">
<h3>{{ item.who }}</h3>
<h4>{{ item.what }}</h4>
<p>{{ item.notes }}</p>
</div>
<md-button class="md-fab md-mini md-raised md-primary" sv-handle>
<md-icon md-font-icon="material-icons" style="font-size:24px;">swap_vert</md-icon>
</md-button>
</md-list-item>
</md-list>
</md-content>
</div>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://kamilkp.github.io/angular-sortable-view/src/angular-sortable-view.js"></script>
<script src="app.js"></script>
</body>
</html>
# Angular Material Sortable View
[jQuery2DotNet](http://www.jquery2dotnet.com/)
var app = angular.module('BlankApp', ['ngMaterial', 'angular-sortable-view']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
var imagePath = 'https://material.angularjs.org/latest/img/list/60.jpeg';
$scope.todos = [{
face: imagePath,
what: 'Brunch this weekend Item 1',
who: 'Item 1',
when: '3:08PM',
notes: " I'll be in your neighborhood doing errands"
}, {
face: imagePath,
what: 'Brunch this weekend',
who: 'Item 2',
when: '3:08PM',
notes: " I'll be in your neighborhood doing errands"
}, {
face: imagePath,
what: 'Brunch this weekend?',
who: 'Item 3',
when: '3:08PM',
notes: " I'll be in your neighborhood doing errands"
}, {
face: imagePath,
what: 'Brunch this weekend?',
who: 'Item 4',
when: '3:08PM',
notes: " I'll be in your neighborhood doing errands"
}, {
face: imagePath,
what: 'Brunch this weekend?',
who: 'Item 5',
when: '3:08PM',
notes: " I'll be in your neighborhood doing errands"
}];
});