Allow available themes to be dragged to sortable 'enabled themes' list

Still not doing anything with the sort update events.

src/app/general-config-panel.coffee

@@ -14,7 +14,7 @@ delete window.jQuery
 module.exports =
 class GeneralConfigPanel extends ConfigPanel
   @content: ->
-    @div class: 'config-panel', =>
+    @div id: 'general-config-panel', class: 'config-panel', =>
       @div class: 'row', =>
         @label for: 'core.hideGitIgnoredFiles', "Hide files in .gitignore:"
         @input id: 'core.hideGitIgnoredFiles', type: 'checkbox'
@@ -24,12 +24,18 @@ class GeneralConfigPanel extends ConfigPanel
         @input id: 'core.autosave', type: 'checkbox'
 
       @div class: 'section', =>
-        @div class: 'list-header', "Enabled Packages"
-        @ol id: 'package-list', outlet: 'packageList'
+        @div class: 'list-wrapper', =>
+          @div class: 'list-header', "Enabled Packages"
+          @ol id: 'package-list', outlet: 'packageList'
 
       @div class: 'section', =>
-        @div class: 'list-header', "Available Themes"
-        @ol id: 'available-theme-list', outlet: 'availableThemeList'
+        @div class: 'list-wrapper pull-left', =>
+          @div class: 'list-header', "Enabled Themes"
+          @ol id: 'enabled-theme-list', outlet: 'enabledThemeList'
+
+        @div class: 'list-wrapper pull-left', =>
+          @div class: 'list-header', "Available Themes"
+          @ol id: 'available-theme-list', outlet: 'availableThemeList'
 
   initialize: ->
     @populatePackageList()
@@ -60,5 +66,16 @@ class GeneralConfigPanel extends ConfigPanel
 
   populateThemeLists: ->
     for name in atom.getAvailableThemeNames()
-      @availableThemeList.append $$ ->
+      @availableThemeList.append(
+        $$(-> @li name: name, name).draggable(
+          connectToSortable: '#enabled-theme-list'
+          appendTo: '#general-config-panel'
+          helper: 'clone'
+        )
+      )
+
+    for name in config.get("core.themes")
+      @enabledThemeList.append $$ ->
         @li name: name, name
+
+    @enabledThemeList.sortable()

static/config.less

@@ -1,3 +1,9 @@
+.clearfix() {
+  zoom: 1;
+  &:before { content: ''; display: block; }
+  &:after { content: ''; display: table; clear: both; }
+}
+
 #config-view {
   height: 100%;
   width: 100%;
@@ -23,33 +29,50 @@
   #panels {
     -webkit-flex: 1;
     overflow-y: auto;
+
+    .pull-left {
+      float: left;
+    }
+
     > div {
       padding: 20px;
 
       .section {
         margin-bottom: 20px;
+        .clearfix();
+      }
+
+      .list-wrapper {
+        width: 300px;
+        margin-right: 10px;
       }
 
       .list-header {
         box-sizing: border-box;
         background: #eee;
-        width: 300px;
         padding: 10px;
         border: 1px solid #ccc;
       }
 
+      li.ui-draggable-dragging {
+        width: 300px;
+        background: white;
+        border: 1px solid #eee;
+        padding: 10px;
+      }
+
       ol {
         box-sizing: border-box;
-        width: 300px;
         height: 400px;
         overflow-y:  auto;
         border: 1px solid #ccc;
         border-top-width: 0;
+        background: #fafafa;
 
         li {
           padding: 10px;
-          border-top: 1px solid #eee;
-          &:first-child { border-bottom-width: 0px; }
+          border-bottom: 1px solid #eee;
+          background: white;
 
           input[type='checkbox'] {
             margin-right: 10px;