very basic tab sorting

src/app/sortable-view.coffee

@@ -0,0 +1,45 @@
+{View} = require 'space-pen'
+$ = require 'jquery'
+
+module.exports =
+class SortableView extends View
+  initialize: ->
+    @on 'dragstart', '.sortable', @onDragStart
+    @on 'dragend',   '.sortable', @onDragEnd
+    @on 'dragover',  '.sortable', @onDragOver
+    @on 'dragenter', '.sortable', @onDragEnter
+    @on 'dragleave', '.sortable', @onDragLeave
+    @on 'drop',      '.sortable', @onDrop
+
+  onDragStart: (event) =>
+    el = @sortableElement(event)
+    el.addClass 'is-dragging'
+
+    event.originalEvent.dataTransfer.setData 'index', el.index()
+
+  onDragEnd: (event) =>
+    el = @sortableElement(event)
+    el.removeClass 'is-dragging'
+
+  onDragEnter: (event) =>
+    event.preventDefault()
+
+  onDragOver: (event) =>
+    event.preventDefault()
+
+  onDragLeave: (event) =>
+    el = @sortableElement(event)
+    el.removeClass 'is-drop-target'
+
+  onDrop: (event) =>
+    event.stopPropagation()
+    el = @sortableElement(event)
+    idx = event.originalEvent.dataTransfer.getData('index')
+    dropped = el.parent().find(".sortable:eq(#{idx})")
+    dropped.remove()
+    dropped.insertBefore(el)
+
+  sortableElement: (event) ->
+    el = $(event.target)
+    if !el.hasClass('sortable') then el.closest('.sortable') else el
+

src/packages/tabs/src/tab.coffee

@@ -4,7 +4,7 @@ fs = require 'fs'
 module.exports =
 class Tab extends View
   @content: (editSession) ->
-    @li class: 'tab', =>
+    @li class: 'tab sortable', =>
       @span class: 'file-name', outlet: 'fileName'
       @span class: 'close-icon'
 

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

@@ -1,11 +1,9 @@
 $ = require 'jquery'
-{View} = require 'space-pen'
+SortableView = require 'sortable-view'
 Tab = require 'tabs/src/tab'
 
 module.exports =
-class Tabs extends View
-  dndType: 'text/x-atom-tab'
-
+class Tabs extends SortableView
   @activate: (rootView) ->
     rootView.eachEditor (editor) =>
       @prependToEditorPane(rootView, editor) if editor.attached
@@ -18,6 +16,8 @@ class Tabs extends View
     @ul class: 'tabs'
 
   initialize: (@editor) ->
+    super
+
     for editSession, index in @editor.editSessions
       @addTabForEditSession(editSession)
 
@@ -35,26 +35,6 @@ class Tabs extends View
       @editor.destroyEditSessionIndex(index)
       false
 
-    @on 'dragstart', '.tab', @onDragStart
-    @on 'dragend',   '.tab', @onDragEnd
-    @on 'dragenter', '.tab', @onDragEnter
-    @on 'dragleave', '.tab', @onDragLeave
-
-  onDragStart: (event) =>
-    $(event.target).addClass 'is-dragging'
-
-  onDragEnd: (event) =>
-    $(event.target).removeClass 'is-dragging'
-
-  onDragEnter: (event) =>
-    el = $(event.target)
-    el = el.closest('.tab') if !el.hasClass('tab')
-    el.addClass 'is-drop-target'
-
-  onDragLeave: (event) =>
-    el = $(event.target)
-    el.removeClass 'is-drop-target' if el.hasClass 'tab'
-
   addTabForEditSession: (editSession) ->
     @append(new Tab(editSession, @editor))
 

static/tabs.css

@@ -80,9 +80,14 @@
 
 /* Drag and Drop */
 .tab.is-dragging {
-  -webkit-box-flex: 1;
+/*  -webkit-box-flex: 1;*/
   color: red;
 }
 
+.tab.is-drop-target {
 
-sdfsdf
+}
+
+.placeholder {
+/*  background-color: #0098ff;*/
+}