Loupax · September 19, 2013 19:50
diff --git a/gistfile1.js b/gistfile1.js
 <!doctype html>
 <html ng-app="app">
  <head>
  	
 	</head>
 	<body>
 		<div>
 		    <div ng-controller="ListsController"> 
 		        <!-- sortable-connect-with specifies the element that will be connected to this -->
            <!-- sortable-limit tells the directive that this element cannot contain more elements than those specified -->
            <!-- sortable-overflow specifies the id of the list where overflowing elemenents get added to in case of overflow-->
            <ol id="important" sortable-connect-with="#unimportant" sortable-limit="2"  sortable-overflow="unimportant">
 		            <li ng-repeat="stuff in important">{{stuff.title}}</li>
 		        </ol>
 		        
 		        <ol id="unimportant" sortable-connect-with="#important">
 		            <li ng-repeat="stuff in unimportant">{{stuff.title}}</li>
 		        </ol>

 		        <div>
 		        	{{important.concat(unimportant)}}
 		        </div>
 		    </div>
 		</div>
 		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 		<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js'></script>    
      	<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>

 		<script>
 			var app = angular.module('app', ['ui']);

 			app.controller('ListsController', ['$scope', function($scope){
 			    $scope.important = [{title: 'Task 1'}, {title: 'Task 2'}, {title: 'Task 3'}];
 			    $scope.unimportant    = [{title: 'Task 4'}, {title: 'Task 5'}, {title: 'Task 6'}];
 			    
 			}]);

 			app.directive('sortableConnectWith', function(){
 			    var link = function(scope, element, attributes){
 			        
 			        var connected = null;

 			        var sortableSettings = {
 			        	update: function(event, ui){
 			        		var list = $(this);
 			        		var lists = {};

 			        		var id = list.attr('id');
 			        		list.find('li').each(function(){
 			        			lists[id] = lists[id] || [];
 			        			lists[id].push($(this).scope());		        			
 			        		});

 							
 			        		if(connected){
 			        			id = connected.attr('id');
 			        			connected.find('li').each(function(){
 				        			lists[id] = lists[id] || [];
 				        			lists[id].push($(this).scope());
 			        			});
 			        		}

 			        		var j, i;
 			        		for(i in lists)
 			        		{
 			        			if(lists.hasOwnProperty(i))
 			        			{
 			        				scope[i].length = 0;
 			        				for(j = 0; j < lists[i].length; j++){
 			        					// Stuff propably needs change every time
 			        					scope[i].push(lists[i][j].stuff);	
 			        				}			       				
 			        			}
 			        		}

 			        		var tasks = [], limit, task;

 			        		if(!!attributes.sortableLimit){
 			        			id = list.attr('id');
 			        			limit = parseInt(attributes.sortableLimit, 10);

 				        		for(i = 0; i < lists[id].length; i++)
 				        		{
 				        			if(i >= limit)
 				        			{				       
 				        				task = scope[id][i];				        			
 				        				tasks.push(task);				        				
 				        			}
 				        		}
 			        		}

 			        		var overflow_target = attributes.sortableOverflow || undefined;
 			        		for(i = 0; i < tasks.length; i++)
 			        		{
 			        			if(overflow_target)
 			        			{
 			        				scope[overflow_target].unshift(tasks[i]);		
 			        			}
 			        					
 			        			for(j = 0; j < scope[id].length; j++)
 			        			{
 			        				if(scope[id][j] === tasks[i])
 			        				{
 			        					scope[id].splice(j, 1);
 			        				}
 			        			}
 			        		}

 			        		delete tasks;

 			        		scope.$apply();
 			        	},

 			        };

 			        if(!!attributes.sortableConnectWith){
 			        	sortableSettings.connectWith = attributes.sortableConnectWith;
 			        	connected = $(attributes.sortableConnectWith);
 			        }

 			        element.sortable(sortableSettings);
 			    };
 			    
 			    return {
 			        restrict: 'A',
 			        link: link
 			    }
 			});

 		</script>
 	</body>
 </html>
	<!doctype html>
	<html ng-app="app">
	<head>

	</head>
	<body>
	<div>
	<div ng-controller="ListsController">
	<!-- sortable-connect-with specifies the element that will be connected to this -->
	<!-- sortable-limit tells the directive that this element cannot contain more elements than those specified -->
	<!-- sortable-overflow specifies the id of the list where overflowing elemenents get added to in case of overflow-->
	<ol id="important" sortable-connect-with="#unimportant" sortable-limit="2" sortable-overflow="unimportant">
	<li ng-repeat="stuff in important">{{stuff.title}}</li>
	</ol>

	<ol id="unimportant" sortable-connect-with="#important">
	<li ng-repeat="stuff in unimportant">{{stuff.title}}</li>
	</ol>

	<div>
	{{important.concat(unimportant)}}
	</div>
	</div>
	</div>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js'></script>
	<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>

	<script>
	var app = angular.module('app', ['ui']);

	app.controller('ListsController', ['$scope', function($scope){
	$scope.important = [{title: 'Task 1'}, {title: 'Task 2'}, {title: 'Task 3'}];
	$scope.unimportant = [{title: 'Task 4'}, {title: 'Task 5'}, {title: 'Task 6'}];

	}]);

	app.directive('sortableConnectWith', function(){
	var link = function(scope, element, attributes){

	var connected = null;

	var sortableSettings = {
	update: function(event, ui){
	var list = $(this);
	var lists = {};

	var id = list.attr('id');
	list.find('li').each(function(){
	lists[id] = lists[id] \|\| [];
	lists[id].push($(this).scope());
	});


	if(connected){
	id = connected.attr('id');
	connected.find('li').each(function(){
	lists[id] = lists[id] \|\| [];
	lists[id].push($(this).scope());
	});
	}

	var j, i;
	for(i in lists)
	{
	if(lists.hasOwnProperty(i))
	{
	scope[i].length = 0;
	for(j = 0; j < lists[i].length; j++){
	// Stuff propably needs change every time
	scope[i].push(lists[i][j].stuff);
	}
	}
	}

	var tasks = [], limit, task;

	if(!!attributes.sortableLimit){
	id = list.attr('id');
	limit = parseInt(attributes.sortableLimit, 10);

	for(i = 0; i < lists[id].length; i++)
	{
	if(i >= limit)
	{
	task = scope[id][i];
	tasks.push(task);
	}
	}
	}

	var overflow_target = attributes.sortableOverflow \|\| undefined;
	for(i = 0; i < tasks.length; i++)
	{
	if(overflow_target)
	{
	scope[overflow_target].unshift(tasks[i]);
	}

	for(j = 0; j < scope[id].length; j++)
	{
	if(scope[id][j] === tasks[i])
	{
	scope[id].splice(j, 1);
	}
	}
	}

	delete tasks;

	scope.$apply();
	},

	};

	if(!!attributes.sortableConnectWith){
	sortableSettings.connectWith = attributes.sortableConnectWith;
	connected = $(attributes.sortableConnectWith);
	}

	element.sortable(sortableSettings);
	};

	return {
	restrict: 'A',
	link: link
	}
	});

	</script>
	</body>
	</html>