Add track with drag-n-drop

app/assets/javascripts/player.coffee

@@ -49,30 +49,31 @@ class window.Player
         self.setTrack next
     false
   
-  addTrack: (item, autoplay) ->
-    if typeof item in ["number", "string"]
-      item = @library[item]
+  addTrack: (track, autoplay) ->
+    if typeof track in ["number", "string"]
+      track = @library[track]
     if not autoplay?
       autoplay = false
     initial_count = $('.playlist li').length
-    len = parseInt(item.length, 10)
-    m = Math.floor(len / 60)
-    s = len - Math.floor(len / 60) * 60
-    duration = m + ':' + (if s < 10 then '0' else '') + s
-    item_class = (if item.available == false then 'unavailable' else '')
-    $('.playlist').append "
-    <li id='i#{Math.round(Math.random() * 999999)}' data-id='#{item.id}' class='#{item_class}'>
-      <div class='song-duration'>#{duration}</div>
-      <div class='label important remove'>remove</div>
-      <div class='artist-name'><a class='data artist'>#{item.artist}</a></div>
-      <div class='song-title'>#{item.name}</div>
-    </li>"
-    _player.playlist.push item
-    $('.playlist').sortable axis: 'y', cursor: 'move'
+    $('.playlist').append this.generateTrackHtml track
+    $('.playlist').sortable "refresh"
     if initial_count == 0 and not _player.hasTrack()
       _player.setTrack($('.playlist li').first().attr('id').split('i')[1])
     false
   
+  generateTrackHtml: (track) ->
+    len = parseInt(track.length, 10)
+    m = Math.floor(len / 60)
+    s = len - Math.floor(len / 60) * 60
+    duration = m + ':' + (if s < 10 then '0' else '') + s
+    item_class = (if track.available == false then 'unavailable' else '')
+    "<li id='i#{Math.round(Math.random() * 999999)}' data-id='#{track.id}' class='#{item_class}'>
+      <div class='song-duration'>#{duration}</div>
+      <div class='label important remove'>remove</div>
+      <div class='artist-name'><a class='data artist'>#{track.artist}</a></div>
+      <div class='song-title'>#{track.name}</div>
+    </li>"
+  
   getDataFromLi: (obj) ->
     id = $(obj).attr 'data-id'
     track_name = $(obj).find('.trackname').html()
@@ -207,6 +208,9 @@ class window.Player
     if data.tracks?
       for track in data.tracks
         @library[track.id] = track
+    $('.track').draggable
+      helper: 'clone'
+      connectToSortable: '.playlist'
     false
 
 
@@ -242,6 +246,25 @@ $('.do_empty').live 'click', ->
 
 # Playlist Actions
 
+$ ->
+  $('.playlist').sortable
+    distance: 5
+    axis: 'y'
+    cursor: 'move'
+    stop: (e, ui) ->
+      if $(ui.item).prop("tagName") == "TR"
+        ui.item.replaceWith(_player.generateTrackHtml(_player.library[$(ui.item).find('.s-add').data('id')]))
+      false
+  $('.playlist').droppable
+    accept: '.track'
+    drop: (e, ui) ->
+      $(this).sortable "refresh"
+      window.setTimeout ->
+        $('.playlist tr.track').remove()
+      , 0
+      false
+  false
+
 $('.playlist li .remove').live 'click', (e) ->
   $li = $(this).parent()
   if $li.hasClass 'now'