Code:
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>Teamauswahl</title>
<link href="../assets/application-97bb7b9bb3814fcbc725a992423fd8c6.css" media="screen" rel="stylesheet" type="text/css" />
<script src="../../ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="../../ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js" type="text/javascript"></script>
<script src="../../cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="../assets/application-f5b84eb4640f417645826407d22defad.js" type="text/javascript"></script>
<script type="text/javascript">
window.pageId = 'designer';
playerList = [{"created_at":"2012-04-09T21:53:14Z","id":1,"name":"Marco Amelia","number":1,"position":"GK","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":2,"name":"Mark van Bommel","number":4,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":3,"name":"Philippe Mexes","number":5,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":4,"name":"Alexandre Pato","number":7,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":5,"name":"Gennaro Gattuso","number":8,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":6,"name":"Filippo Inzaghi","number":9,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":7,"name":"Clarence Seedorf","number":10,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":8,"name":"Zlatan Ibrahimovic","number":11,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":9,"name":"Alessandro Nesta","number":13,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":10,"name":"Sulley Muntari","number":14,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":11,"name":"Djamel Mesbah","number":15,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":12,"name":"Mathieu Flamini","number":16,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":13,"name":"Alberto Aquilani","number":18,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":14,"name":"Gianluca Zambrotta","number":19,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":15,"name":"Ig****o Abate","number":20,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":16,"name":"Maxi Lopez","number":21,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":17,"name":"Antonio Nocerino","number":22,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":18,"name":"Massimo Ambrosini","number":23,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":19,"name":"Rodney Strasser","number":24,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":20,"name":"Daniele Bonera","number":25,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":21,"name":"Kevin-Prince Boateng","number":27,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":22,"name":"Urby Emanuelson","number":28,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":23,"name":"Flavio Roma","number":30,"position":"GK","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":24,"name":"Christian Abbiati","number":32,"position":"GK","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":25,"name":"Thiago Silva","number":33,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":26,"name":"Alexander Merkel","number":37,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":27,"name":"Mattia De Sciglio","number":52,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":28,"name":"Mattia Valoti","number":57,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":29,"name":"Robinho","number":70,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":30,"name":"Mario Yepes","number":76,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":31,"name":"Luca Antonini","number":77,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":32,"name":"Stephan El Shaarawy","number":92,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":33,"name":"Antonio Cassano","number":99,"position":"FW","updated_at":"2012-04-09T21:53:14Z"}];
formationList = [{"configuration":{"players":[null,7,null,null,null,null,null,null,null,13,null],"positions":[1,8,3,5,10,7,13,11,24,15,19]},"created_at":"2012-04-10T02:51:00Z","id":4,"is_active":false,"is_default":false,"name":"2-3-2-1-1","updated_at":"2013-09-05T05:04:58Z"},{"configuration":{"players":[18,null,8,16,null,5,null,null,null,null,3],"positions":[1,2,8,5,6,17,11,20,21,7,30]},"created_at":"2012-04-09T21:53:14Z","id":1,"is_active":false,"is_default":true,"name":"4-4-2","updated_at":"2013-09-05T05:04:58Z"},{"configuration":{"players":[22,null,null,null,16,7,null,null,null,null,null],"positions":[1,2,4,6,17,18,20,21,27,29,31]},"created_at":"2012-04-09T21:53:14Z","id":3,"is_active":false,"is_default":true,"name":"3-4-3","updated_at":"2013-09-05T05:04:58Z"},{"configuration":{"players":[null,null,null,null,null,null,null,null,null,null,null],"positions":[1,7,8,10,11,29,17,21,4,19,25]},"created_at":"2012-04-09T21:53:14Z","id":2,"is_active":true,"is_default":true,"name":"4-3-3","updated_at":"2013-09-05T05:04:58Z"}];
positionList = [{"created_at":"2012-04-09T21:53:14Z","id":1,"label":"GK","updated_at":"2012-04-09T21:53:14Z","x":183,"y":498},{"created_at":"2012-04-09T21:53:14Z","id":2,"label":"DL","updated_at":"2012-04-09T21:53:14Z","x":28,"y":415},{"created_at":"2012-04-09T21:53:14Z","id":3,"label":"DCL","updated_at":"2012-04-09T21:53:14Z","x":134,"y":415},{"created_at":"2012-04-09T21:53:14Z","id":4,"label":"DC","updated_at":"2012-04-09T21:53:14Z","x":184,"y":415},{"created_at":"2012-04-09T21:53:14Z","id":5,"label":"DCR","updated_at":"2012-04-09T21:53:14Z","x":232,"y":415},{"created_at":"2012-04-09T21:53:14Z","id":6,"label":"DR","updated_at":"2012-04-09T21:53:14Z","x":339,"y":415},{"created_at":"2012-04-09T21:53:14Z","id":7,"label":"DML","updated_at":"2012-04-09T21:53:14Z","x":28,"y":332},{"created_at":"2012-04-09T21:53:14Z","id":8,"label":"DMCL","updated_at":"2012-04-09T21:53:14Z","x":134,"y":332},{"created_at":"2012-04-09T21:53:14Z","id":9,"label":"DMC","updated_at":"2012-04-09T21:53:14Z","x":184,"y":332},{"created_at":"2012-04-09T21:53:14Z","id":10,"label":"DMCR","updated_at":"2012-04-09T21:53:14Z","x":232,"y":332},{"created_at":"2012-04-09T21:53:14Z","id":11,"label":"DMR","updated_at":"2012-04-09T21:53:14Z","x":339,"y":332},{"created_at":"2012-04-09T21:53:14Z","id":12,"label":"BML","updated_at":"2012-04-09T21:53:14Z","x":28,"y":250},{"created_at":"2012-04-09T21:53:14Z","id":13,"label":"BCL","updated_at":"2012-04-09T21:53:14Z","x":134,"y":250},{"created_at":"2012-04-09T21:53:15Z","id":14,"label":"MC","updated_at":"2012-04-09T21:53:15Z","x":184,"y":250},{"created_at":"2012-04-09T21:53:15Z","id":15,"label":"BCR","updated_at":"2012-04-09T21:53:15Z","x":232,"y":250},{"created_at":"2012-04-09T21:53:15Z","id":16,"label":"BMR","updated_at":"2012-04-09T21:53:15Z","x":339,"y":250},{"created_at":"2012-04-09T21:53:15Z","id":17,"label":"ML","updated_at":"2012-04-09T21:53:15Z","x":28,"y":168},{"created_at":"2012-04-09T21:53:15Z","id":18,"label":"MCL","updated_at":"2012-04-09T21:53:15Z","x":134,"y":168},{"created_at":"2012-04-09T21:53:15Z","id":19,"label":"MC","updated_at":"2012-04-09T21:53:15Z","x":184,"y":168},{"created_at":"2012-04-09T21:53:15Z","id":20,"label":"MCR","updated_at":"2012-04-09T21:53:15Z","x":232,"y":168},{"created_at":"2012-04-09T21:53:15Z","id":21,"label":"MR","updated_at":"2012-04-09T21:53:15Z","x":339,"y":168},{"created_at":"2012-04-09T21:53:15Z","id":22,"label":"AML","updated_at":"2012-04-09T21:53:15Z","x":28,"y":86},{"created_at":"2012-04-09T21:53:15Z","id":23,"label":"AMCL","updated_at":"2012-04-09T21:53:15Z","x":134,"y":86},{"created_at":"2012-04-09T21:53:15Z","id":24,"label":"AMC","updated_at":"2012-04-09T21:53:15Z","x":184,"y":86},{"created_at":"2012-04-09T21:53:15Z","id":25,"label":"AMCR","updated_at":"2012-04-09T21:53:15Z","x":232,"y":86},{"created_at":"2012-04-09T21:53:15Z","id":26,"label":"AMR","updated_at":"2012-04-09T21:53:15Z","x":339,"y":86},{"created_at":"2012-04-09T21:53:15Z","id":27,"label":"FL","updated_at":"2012-04-09T21:53:15Z","x":28,"y":5},{"created_at":"2012-04-09T21:53:15Z","id":28,"label":"AFL","updated_at":"2012-04-09T21:53:15Z","x":134,"y":5},{"created_at":"2012-04-09T21:53:15Z","id":29,"label":"AF","updated_at":"2012-04-09T21:53:15Z","x":184,"y":5},{"created_at":"2012-04-09T21:53:15Z","id":30,"label":"AFR","updated_at":"2012-04-09T21:53:15Z","x":232,"y":5},{"created_at":"2012-04-09T21:53:15Z","id":31,"label":"FR","updated_at":"2012-04-09T21:53:15Z","x":339,"y":5}];
</script>
<script type="text/template" id="player-template">
<span class="player-no" data-id="{{ id }}">{{ number }}</span>
<span class="player-name">{{ name }}</span>
<span class="player-pos">{{ position }}</span>
</script>
<script type="text/template" id="position-template">
</script>
<script type="text/template" id="player-position-template">
<span class="shirt-number">{{ number }}</span>
<span class="shirt-name">{{ name }}</span>
</script>
<script type="text/template" id="formation-template">
<a href="#">{{ name }}</a>
</script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="GM1TR0HoWNGeotpaDYVjLzQKQmELLE9AILk44CJWfrI=" name="csrf-token" />
</head>
<body>
<div id="container">
<h3>Formation Designer</h3>
<div id="formation-manager">
<ul id="formation-menu">
<li id="formation-append">
<a href="#">Formation</a>
<ul id="formation-list">
<li class="formation-menu-item">
<a href="#" id="save-formation">Team Speichern</a>
</li>
<li class="formation-menu-item">
<a href="#" id="save-formation-as">Team Speichern als ...</a>
</li>
</ul>
</li>
<li>
<a href="builder.html">Aufstellung</a>
</li>
</ul>
</div>
<div class="clear">
</div>
<div id="pitch">
</div>
</div>
</body>
</html>
Ich habe jetzt schon einmal diese Lösung gefunden. Allerdings ist hier die Aufstellung fest eingetragen und kommt nicht aus der Datenbank. Schöner wäre natürlich wenn diese nun per SQL Befehl aus der DB geholt werden würde und dann auch dort gespeichert wird.