sorting works on a single editor

Needs updating to support dragging between panels

src/packages/tabs/src/tabs-view.coffee

@@ -1,9 +1,9 @@
 $ = require 'jquery'
-SortableView = require 'sortable-view'
+SortableList = require 'sortable-list'
 Tab = require 'tabs/src/tab'
 
 module.exports =
-class Tabs extends SortableView
+class Tabs extends SortableList
   @activate: (rootView) ->
     rootView.eachEditor (editor) =>
       @prependToEditorPane(rootView, editor) if editor.attached
@@ -13,7 +13,7 @@ class Tabs extends SortableView
       pane.prepend(new Tabs(editor))
 
   @content: ->
-    @ul class: 'tabs'
+    @ul class: "tabs #{@viewClass()}"
 
   initialize: (@editor) ->
     super
@@ -44,3 +44,16 @@ class Tabs extends SortableView
 
   removeTabAtIndex: (index) ->
     @find(".tab:eq(#{index})").remove()
+
+  onDrop: (event) =>
+    super
+    sessions = @editor.editSessions
+    el = @sortableElement(event)
+    previousIndex = event.originalEvent.dataTransfer.getData('index')
+    currentIndex  = el.index() - 1
+
+    sessions.splice(currentIndex, 0, sessions.splice(previousIndex, 1)[0])
+
+    @setActiveTab(currentIndex)
+    @editor.setActiveEditSessionIndex(currentIndex)
+    @editor.focus()

static/tabs.css

@@ -80,12 +80,20 @@
 
 /* Drag and Drop */
 .tab.is-dragging {
-/*  -webkit-box-flex: 1;*/
-  color: red;
+
 }
 
-.tab.is-drop-target {
-
+.tab.is-drop-target:before {
+  position: absolute;
+  top: 0;
+  left: -2px;
+  content: "";
+  z-index: 999;
+  display: inline-block;
+  width: 1px;
+  height: 30px;
+  display: inline-block;
+  background: #0098ff;
 }
 
 .placeholder {