Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 14, 2014 16:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/f78eae2d07e2342c31dd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/f78eae2d07e2342c31dd to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Captain Anonymous.
Raw
index.html
<div ng-app="sortableApp" ng-controller="sortableController" class="container">
<h2>ui.sortable connected lists event order</h2>
<div class="floatleft">
<input ng-model="customKey"/><input ng-model="customValue"/>
<button type="button" ng-click="addCustomItem()">Add Custom</button>
<div id="benefits" ui-sortable="sortableOptionsList[0]" class="apps-container screen floatleft" ng-model="rawScreens[0]">
<div class="app" ng-repeat="app in rawScreens[0]">{{$index}} {{app.title}}</div>
</div>
<div id="slots" ui-sortable="sortableOptionsList[1]" class="apps-container screen floatleft" ng-model="rawScreens[1]">
<div class="app" ng-repeat="app in rawScreens[1]">{{$index}} {{app.title}}</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>
Raw
script.js
var myapp = angular.module('sortableApp', ['ui.sortable']);
myapp.controller('sortableController', function ($scope) {
var tmpList = [];
$scope.rawScreens = [
[{
icon: './img/icons/facebook.jpg',
title: 'Facebook (a)',
link: 'http://www.facebook.com'
}, {
icon: './img/icons/youtube.jpg',
title: 'Youtube (a)',
link: 'http://www.youtube.com'
}, {
icon: './img/icons/gmail.jpg',
title: 'Gmail (a)',
link: 'http://www.gmail.com'
}, {
icon: './img/icons/google+.jpg',
title: 'Google+ (a)',
link: 'http://plus.google.com'
}, {
icon: './img/icons/twitter.jpg',
title: 'Twitter (a)',
link: 'http://www.twitter.com'
}, {
icon: './img/icons/yahoomail.jpg',
title: 'Yahoo Mail (a)',
link: 'http://mail.yahoo.com'
}, {
icon: './img/icons/pinterest.jpg',
title: 'Pinterest (a)',
link: 'http://www.pinterest.com'
}],
[{
icon: './img/icons/facebook.jpg',
title: 'Facebook (b)',
link: 'http://www.facebook.com'
}, {
icon: './img/icons/youtube.jpg',
title: 'Youtube (b)',
link: 'http://www.youtube.com'
}, {
icon: './img/icons/gmail.jpg',
title: 'Gmail (b)',
link: 'http://www.gmail.com'
}, {
icon: './img/icons/google+.jpg',
title: 'Google+ (b)',
link: 'http://plus.google.com'
}, {
icon: './img/icons/twitter.jpg',
title: 'Twitter (b)',
link: 'http://www.twitter.com'
}, {
icon: './img/icons/yahoomail.jpg',
title: 'Yahoo Mail (b)',
link: 'http://mail.yahoo.com'
}, {
icon: './img/icons/pinterest.jpg',
title: 'Pinterest (b)',
link: 'http://www.pinterest.com'
}]
];
$scope.sortingLog = [];
function createOptions (listName) {
var _listName = listName;
var options = {
placeholder: "app",
connectWith: ".apps-container",
activate: function() {
console.log("list " + _listName + ": activate");
},
beforeStop: function() {
console.log("list " + _listName + ": beforeStop");
},
change: function() {
console.log("list " + _listName + ": change");
},
create: function() {
console.log("list " + _listName + ": create");
},
deactivate: function() {
console.log("list " + _listName + ": deactivate");
},
out: function() {
console.log("list " + _listName + ": out");
},
over: function() {
console.log("list " + _listName + ": over");
},
receive: function() {
console.log("list " + _listName + ": receive");
},
remove: function() {
console.log("list " + _listName + ": remove");
},
sort: function() {
console.log("list " + _listName + ": sort");
},
start: function() {
console.log("list " + _listName + ": start");
},
stop: function() {
console.log("list " + _listName + ": stop");
},
update: function(event, ui) {
// check that its an actual moving
// between the two lists
if (event.target.id !== 'slots' && ui.item.sortable.droptarget.attr('id') === 'slots' && $scope.rawScreens[1].length >= 10) {
ui.item.sortable.cancel();
}
}
};
return options;
}
$scope.sortableOptionsList = [createOptions('A'), createOptions('B')];
$scope.customKey = "";
$scope.customValue = "";
$scope.keyValue = $scope.customKey + " " + $scope.customValue;
$scope.addCustomItem = function(){
$scope.rawScreens[0].push({title:$scope.customKey + " " + $scope.customValue});
}
$scope.logModels = function () {
$scope.sortingLog = [];
for (var i = 0; i < $scope.rawScreens.length; i++) {
var logEntry = $scope.rawScreens[i].map(function (x) {
return x.title;
}).join(', ');
logEntry = 'container ' + (i+1) + ': ' + logEntry;
$scope.sortingLog.push(logEntry);
}
};
});
Raw
style.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;
}
/*** 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment