Angular Sortable

by TheFiddler

HTML

<div ng-app="sortableApp" ng-controller="sortableController" class="container">
  <h2>ui.sortable filtering</h2>

  <div class="floatleft">
    <div class="floatleft">
      <h2>Category A</h2>
      <div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="modelA" app-column="a">
        <div id="{{app.id}}" class="app" ng-repeat="app in modelA">{{app.id}} {{app.title}}</div>
      </div>
    </div>
    <div class="floatleft">
      <h2>Category B</h2>
      <div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="modelB" app-column="b">
        <div id="{{app.id}}" class="app" ng-repeat="app in modelB">{{app.id}} {{app.title}}</div>
      </div>
    </div>
    <div style="clear: both;"></div>
</div>

  <div class="floatright">
    <button type="button" ng-click="logModels()">Log Models</button>
    <ul class="list logList">
      <li ng-repeat="entry in sortingLog" class="logItem">
        {{entry}}
      </li>
    </ul>
  </div>
  
  <div class="clear"></div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
  <script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
</div>

CSS

.list {
	list-style: none outside none;
	margin: 10px 0 30px;
}

.apps-container {
  border: 2px dashed blue;
  margin: 10px 10px 0 0;
  padding: 5px;
}

.app {
	width: 170px;
	padding: 5px 10px;
	margin: 5px 0;
	border: 2px solid #444;
	border-radius: 5px;
	background-color: #EA8A8A;

	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	cursor: move;
}

.app-ph {
	width: 170px;
	padding: 5px 10px;
	margin: 5px 0;
	border: 2px solid #444;
	border-radius: 5px;
	background-color: #EA8A8A;

	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	cursor: move;
}


/***  Extra ***/

body {
	font-family: Verdana, 'Trebuchet ms', Tahoma;
}

.logList {
	margin-top: 20px;
	width: 250px;
	min-height: 300px;
	padding: 5px 15px;
	border: 5px solid #000;
	border-radius: 15px;
}

.logItem {
  margin-bottom: 10px;
}

.logList:before {
	content: 'log';
	padding: 0 5px;
	position: relative;
	top: -1.1em;
	background-color: #FFF;
}

.container {
	width: 750px;
	margin: auto;
}

h2 {
	text-align: center;
}

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

.clear {
  clear: both;
}

JavaScript

function findAppById(appList, id){
    //IDs are unique so we know we'll only return one app or null
    var app=$.grep(appList, function(e){return e.id == id})[0]
    if(app && app !== undefined)
        return app;
    else
        return null;
}

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


myapp.controller('sortableController', function ($scope, $filter) {
  var tmpList = [];
  
  $scope.rawScreens =
    [{
      id:'01',
      icon: './img/icons/facebook.jpg',
      title: 'Facebook (a)',
      column: 'a',
      link: 'http://www.facebook.com'
    }, {
      id:'02',
      icon: './img/icons/youtube.jpg',
      title: 'Youtube (a)',
      column: 'a',
      link: 'http://www.youtube.com'
    }, {
      id:'03',
      icon: './img/icons/gmail.jpg',
      title: 'Gmail (a)',
      column: 'a',
      link: 'http://www.gmail.com'
    }, {
      id:'04',
      icon: './img/icons/google+.jpg',
      title: 'Google+ (a)',
      column: 'a',
      link: 'http://plus.google.com'
    }, {
      id:'05',
      icon: './img/icons/twitter.jpg',
      title: 'Twitter (a)',
      column: 'a',
      link: 'http://www.twitter.com'
    }, {
      id:'06',
      icon: './img/icons/yahoomail.jpg',
      title: 'Yahoo Mail (a)',
      column: 'a',
      link: 'http://mail.yahoo.com'
    }, {
      id:'07',
      icon: './img/icons/pinterest.jpg',
      title: 'Pinterest (a)',
      column: 'a',
      link: 'http://www.pinterest.com'
    }, {
      id:'08',
      icon: './img/icons/facebook.jpg',
      title: 'Facebook (b)',
      column: 'b',
      link: 'http://www.facebook.com'
    }, {
      id:'09',
      icon: './img/icons/youtube.jpg',
      title: 'Youtube (b)',
      column: 'b',
      link: 'http://www.youtube.com'
    }, {
      id:'10',
      icon: './img/icons/gmail.jpg',
      title: 'Gmail (b)',
      column: 'b',
      link: 'http://www.gmail.com'
    }, {
      id:'11',
      icon: './img/icons/google+.jpg',
      title: 'Google+ (b)',
     ...