Created
October 3, 2014 20:57
-
-
Save clavery/74670eb9ec7b2beae984 to your computer and use it in GitHub Desktop.
Sort SHit // source http://jsbin.com/roludu/1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Sort SHit</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script> | |
| <script src="app.js" type="text/javascript" charset="utf-8"></script> | |
| </head> | |
| <body ng-app="App"> | |
| <div ng-controller="MainCtrl as MainCtrl"> | |
| <ul> | |
| <li ng-repeat="item in MainCtrl.data"> | |
| <input type="text" ng-model="item.pos" ng-init="item._oldpos=item.pos" ng-change="MainCtrl.swap(item)" /> | |
| {{item.title}} | |
| </li> | |
| </ul> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| (function() { | |
| var module = angular.module('App', []); | |
| module.controller('MainCtrl', ['$scope', function($scope) { | |
| this.data = [ | |
| { id: 123, pos: 2, title: 'Test Two' }, | |
| { id: 124, pos: 1, title: 'Test One' }, | |
| { id: 125, pos: 3, title: 'Test Three' }, | |
| { id: 126, pos: 5, title: 'Test Five' }, | |
| { id: 127, pos: 4, title: 'Test Four' } | |
| ]; | |
| this.sortData = function(data) { | |
| this.data.sort(function(a, b) { | |
| if (a.pos === b.pos) | |
| return 0; | |
| return a.pos > b.pos ? 1 : -1; | |
| }); | |
| } | |
| // sort initially | |
| this.sortData(); | |
| this.swap = function(item) { | |
| // find item to swap to | |
| var target = _.find(this.data, function(i) { return i.pos == item.pos && i !== item }); | |
| if (target) { | |
| target.pos = item._oldpos; | |
| target._oldpos = target.pos; | |
| } | |
| item._oldpos = item.pos; | |
| this.sortData(); | |
| } | |
| }]); | |
| })(); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <\!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <\!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
| <\!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> | |
| <\!--[if gt IE 8]><\!--> <html class="no-js"> <\!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Sort SHit</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"><\/script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"><\/script> | |
| <script src="app.js" type="text/javascript" charset="utf-8"><\/script> | |
| </head> | |
| <body ng-app="App"> | |
| <div ng-controller="MainCtrl as MainCtrl"> | |
| <ul> | |
| <li ng-repeat="item in MainCtrl.data"> | |
| <input type="text" ng-model="item.pos" ng-init="item._oldpos=item.pos" ng-change="MainCtrl.swap(item)" /> | |
| {{item.title}} | |
| </li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">(function() { | |
| var module = angular.module('App', []); | |
| module.controller('MainCtrl', ['$scope', function($scope) { | |
| this.data = [ | |
| { id: 123, pos: 2, title: 'Test Two' }, | |
| { id: 124, pos: 1, title: 'Test One' }, | |
| { id: 125, pos: 3, title: 'Test Three' }, | |
| { id: 126, pos: 5, title: 'Test Five' }, | |
| { id: 127, pos: 4, title: 'Test Four' } | |
| ]; | |
| this.sortData = function(data) { | |
| this.data.sort(function(a, b) { | |
| if (a.pos === b.pos) | |
| return 0; | |
| return a.pos > b.pos ? 1 : -1; | |
| }); | |
| } | |
| // sort initially | |
| this.sortData(); | |
| this.swap = function(item) { | |
| // find item to swap to | |
| var target = _.find(this.data, function(i) { return i.pos == item.pos && i !== item }); | |
| if (target) { | |
| target.pos = item._oldpos; | |
| target._oldpos = target.pos; | |
| } | |
| item._oldpos = item.pos; | |
| this.sortData(); | |
| } | |
| }]); | |
| })(); | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var module = angular.module('App', []); | |
| module.controller('MainCtrl', ['$scope', function($scope) { | |
| this.data = [ | |
| { id: 123, pos: 2, title: 'Test Two' }, | |
| { id: 124, pos: 1, title: 'Test One' }, | |
| { id: 125, pos: 3, title: 'Test Three' }, | |
| { id: 126, pos: 5, title: 'Test Five' }, | |
| { id: 127, pos: 4, title: 'Test Four' } | |
| ]; | |
| this.sortData = function(data) { | |
| this.data.sort(function(a, b) { | |
| if (a.pos === b.pos) | |
| return 0; | |
| return a.pos > b.pos ? 1 : -1; | |
| }); | |
| } | |
| // sort initially | |
| this.sortData(); | |
| this.swap = function(item) { | |
| // find item to swap to | |
| var target = _.find(this.data, function(i) { return i.pos == item.pos && i !== item }); | |
| if (target) { | |
| target.pos = item._oldpos; | |
| target._oldpos = target.pos; | |
| } | |
| item._oldpos = item.pos; | |
| this.sortData(); | |
| } | |
| }]); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment