Phi: sortable widgets

Widgets on the right widgetarea can now be
rearranged by drag-and-drop

webgui/index.html

@@ -266,11 +266,9 @@ html, body, #wrapper {
             </div>
             <div id="htabs-content" data-bind="component: { name: selectedTopic, params: { topic: selectedSubtopic } }"></div>
         </div>
-        <div id="widgetarea">
-            <div data-bind="foreach: widgets">
+        <div id="widgetarea" data-bind="foreach: widgets">
               <sidebarwidget params="widget: $data">
               </sidebarwidget>
-            </div>
         </div>
         <div id="statusbar">
             <span>FlightGear. Fly free, be happy. <a href="http://www.flightgear.org/">http://www.flightgear.org/</a></span>

webgui/main.js

@@ -18,7 +18,7 @@ require.config({
 });
 
 require([
-        'knockout', 'jquery','sammy', 'fgcommand', 'themeswitch', 'kojqui/button', 'kojqui/buttonset', 'kojqui/selectmenu', 'flot', 'leaflet'
+        'knockout', 'jquery','sammy', 'fgcommand', 'themeswitch', 'kojqui/button', 'kojqui/buttonset', 'kojqui/selectmenu', 'jquery-ui/sortable', 'flot', 'leaflet'
 ], function(ko, jquery, Sammy, fgcommand ) {
 
     function KnockProps(aliases) {
@@ -341,7 +341,7 @@ require([
         var self = this;
         self.props = props;
         self.widgets = ko.observableArray([
-                "metar", "efis", "radiostack", "map"
+                "METAR", "PFD", "Radiostack", "Small Map", "Stopwatch"
         ]);
 
         self.topics = [
@@ -367,6 +367,13 @@ require([
             fgcommand.unpause();
         }
 
+        jquery("#widgetarea").sortable({
+            handle: ".widget-handle",
+            axis: "y",
+            cursor: "move",
+        });
+        jquery("#widgetarea").disableSelection();
+
         // Client-side routes
         Sammy(function() {
             this.get('#:topic', function() {
@@ -414,23 +421,23 @@ require([
         require : 'widgets/sidebarwidget'
     });
 
-    ko.components.register('map', {
+    ko.components.register('Small Map', {
         require : 'widgets/map'
     });
 
-    ko.components.register('radiostack', {
+    ko.components.register('Radiostack', {
         require : 'widgets/radiostack'
     });
 
-    ko.components.register('metar', {
+    ko.components.register('METAR', {
         require : 'widgets/metar'
     });
 
-    ko.components.register('efis', {
+    ko.components.register('PFD', {
         require : 'widgets/efis'
     });
 
-    ko.components.register('stopwatch', {
+    ko.components.register('Stopwatch', {
         require : 'widgets/Stopwatch'
     });
 

webgui/widgets/sidebarwidget.html

@@ -2,9 +2,13 @@
 .widget-header-button {
 	font-size: unset;
 }
+.widget-handle {
+    cursor: pointer;
+    font-weight: bold;
+}
 </style>
 <div data-bind="event: { mouseover: onMouseover, mouseout: onMouseout }">
-    <div>
+    <div class="ui-state-default widget-handle">
         <button 
           data-bind="
              button: {