Changed the demo page to demonstrate ui.sortable (instead of ui.date).

thgreasi · thgreasi · commit 17df58cc42b5 · 2013-09-30T22:27:05.000+03:00
diff --git a/demo/demo.css b/demo/demo.css
@@ -0,0 +1,51 @@
+.list {
+	list-style: none outside none;
+	margin: 10px 0 30px;
+}
+
+.item {
+	width: 200px;
+	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: 200px;
+	padding: 5px 15px;
+	border: 5px solid #000;
+	border-radius: 15px;
+}
+
+.logList:before {
+	content: 'log';
+	padding: 0 5px;
+	position: relative;
+	top: -1.1em;
+	background-color: #FFF;
+}
+
+.container {
+	width:300px;
+	margin: auto;
+}
+
+h2 {
+	text-align: center;
+}
diff --git a/demo/demo.html b/demo/demo.html
@@ -6,16 +6,53 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>AngularUI - Date Picker Demo</title>
+  <title>AngularUI - Sortable Demo</title>
   <base href=".."></base>
   <link rel="stylesheet" href="components/jquery-ui/themes/smoothness/jquery-ui.css">
+  <link rel="stylesheet" href="demo/demo.css">
   <script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
   <script type="text/javascript" src="bower_components/jquery-ui/ui/jquery-ui.custom.js"></script>
   <script type="text/javascript" src="bower_components/angular/angular.js"></script>
-  <script type="text/javascript" src="src/date.js"></script>
+  <script type="text/javascript" src="src/sortable.js"></script>
+  <script type="text/javascript">
+      var myapp = angular.module('sortableApp', ['ui.sortable']);
+
+      myapp.controller('sortableController', function ($scope) {
+          var tmpList = [];
+
+          for (var i = 1; i <= 6; i++){
+              tmpList.push({
+                text: 'Item ' + i,
+                value: i
+              });
+          }
+
+          $scope.list = tmpList;
+
+
+          $scope.sortingLog = [];
+          
+          $scope.sortableOptions = {
+              // called after a node is dropped
+              stop: function(e, ui) {
+                  var logEntry = 'Moved element: ' + ui.item.scope().item.text;
+                  $scope.sortingLog.push(logEntry);
+              }
+          };
+      });
+  </script>
 </head>
-<body ng-app="ui.date">
-  <label>Select Date: <input type="text" ui-date ng-model="aDate"></label>
-  <div>{{aDate}}</div>
+<body ng-app="sortableApp" ng-controller="sortableController">
+  <div class="container">
+    <h2>ui.sortable demo</h2>
+
+    <ul ui-sortable="sortableOptions" ng-model="list" class="list">
+      <li ng-repeat="item in list" class="item">{{item.text}}</li>
+    </ul>
+
+    <ul class="list logList">
+      <li ng-repeat="entry in sortingLog" class="logItem">{{entry}}</li>
+    </ul>
+  </div>
 </body>
 </html>
