Spotify APIドラッグアンドドロッププレイリスト

Question

Spotify APIを使用して、ドラッグアンドドロップ可能なプレイリストを作成します。私は、このプレイリストは、トラックをドラッグ＆ドロップのために有効になるだろうどのように

var tracks = models.library.tracks; 
var playlist = new models.Playlist(); 

// loop through all tracks and add them to the playlist 
for (var i = 0; i < 25; i++) { 
    var track = models.Track.fromURI(tracks[i].data.uri); 
    playlist.add(track); 
} 

// add playlist to view 
var playlistView = new views.List(playlist); 
$('#playlist').html(playlistView.node); 

？ これは既にSpotify APIに組み込まれていますか（まだ文書化されていません）？ jQuery UIのソート可能な関数を使って、自分で実装しようとしました。

$('#playlist').sortable(); 

しかし、Spotifyはプレイリストはulとli子要素単純ではないので、これはうまくいきませんでした。

Answer 1

ulとli要素を使用してプレイリストが表示されないという問題ではありません。 jQueryのUIソート可能な機能は、実際にタグ、タグはその表示スタイルはテーブルに設定されている、特に（楽しんでるの場合のように）場合を含むのdivタグで正常に動作します。はソート可能ですSP-項目のクラスにリンクするよう指示します

$('#playlist').sortable({ items: 'a.sp-item' }); 

を：あなたは、単にのようなものを使用することによってソート可能であるか、子項目の機能を指示する必要があります。

しかし、アイテムを元の位置に戻しても、それを実行するときにはまだ機能しません。これは、プレイリストの各行が絶対配置を使用するように設定されており、-webkit-transform CSSプロパティを使用して正しいY座標に配置するためです。この結果、「スナップバック」が経験されます。

私はこれを回避する方法を見つけましたが、それはむしろハックです。あなたはソート可能にするリストを設定する前に、単純に次のコードを追加します。

setTimeout(function() { 
    $('#playlist > div > div a.sp-item').attr("style","").css("position","relative"); 
}, 100); 

を。これは、基本的にはプレイリスト内のすべてのリンクから「-webkit-変換」スタイルを削除し、相対位置を使用するように変更します（タイムアウトがあるため、そのリストは、作成直後に完全に構​​築されているようには見えません）。奇妙なことに、これはプレイリストの表示にまったく影響を与えていないように見えるので、なぜこのようにしたのか不思議です...

Answer 2

私はこの数日間、下にスクロールしてタブをクリックし、いくつかのトラックを追加してリストを作成し、ドラッグアンドドロップします。

http://cultureclash.redbull.co.uk/getonstage/

関連するコードは、プレイリスト自体を楽しんでるがそれらを持っているだけのように符号化されたトラックの配列としてどこかに格納されているライン106から始まるhttp://cultureclash.redbull.co.uk/getonstage/js/getonstage-ui.jsです。

ユーザーがトラックを追加すると、その配列を取得し、それをテンプレートに入れてソート可能なDOMを生成します。data-indexの属性は、それぞれliに与えられ、元の配列のインデックスを追跡します。 sortstopイベントが発生すると、私はulを調べ、新しい注文に注意し、配列を一致するようにシフトします。

DOMインスペクタを使用して詳細な情報を調べると、そのファイルをより深く見て再生することができます。