basics of drag and drop support

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

@@ -4,6 +4,8 @@ Tab = require 'tabs/src/tab'
 
 module.exports =
 class Tabs extends View
+  dndType: 'text/x-atom-tab'
+
   @activate: (rootView) ->
     rootView.eachEditor (editor) =>
       @prependToEditorPane(rootView, editor) if editor.attached
@@ -33,8 +35,25 @@ class Tabs extends View
       @editor.destroyEditSessionIndex(index)
       false
 
-    @on 'dragstart', '.tab', (e) ->
-      console.log 'TAB DRAGGED', e
+    @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

@@ -76,4 +76,13 @@
 .tab.file-modified:hover .close-icon:before {
   content: "\f081";
   color: #66a6ff;
-}
+}
+
+/* Drag and Drop */
+.tab.is-dragging {
+  -webkit-box-flex: 1;
+  color: red;
+}
+
+
+sdfsdf