1

SpotifyAPIを使用してドラッグアンドドロップ可能なプレイリストを作成したいと思います。

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);

このプレイリストでトラックのドラッグアンドドロップを有効にするにはどうすればよいですか？ これはすでにSpotifyAPIに組み込まれていますか（ただし、まだ文書化されていません）？jQueryUIのソート可能な関数を使用して自分で実装しようとしました。

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

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

4

2 に答える 2

0

問題は、プレイリストがul要素とli要素を使用して表示されないことではありません。jQuery UI の sortable 関数は、特に (Spotify の場合のように) aタグの表示スタイルがtableに設定されている場合、タグを含むdivタグで問題なく動作します。次のようなものを使用して、ソート可能な子アイテムを関数に伝えるだけです。

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

これは、sp-itemのクラスとのリンクがソート可能であることを示しています。

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

むしろハックですが、これに対する回避策を見つけました。リストをソート可能に設定する前に、次のコードを追加するだけです。

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

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

于 2012-05-22T20:18:10.777 に答える
0

以下のサイトで、数日前にこれとまったく同じことをしました。下にスクロールしてタブをクリックし、いくつかのトラックを追加してリストを作成し、ドラッグ アンド ドロップします。

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

関連するコードはhttp://cultureclash.redbull.co.uk/getonstage/js/getonstage-ui.jsの 106 行目からです。プレイリスト自体は、Spotify と同じようにエンコードされたトラックの配列として別の場所に保存されます。

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

そのファイルを詳しく調べて、DOM インスペクターを使用してアプリを操作し、詳細を確認してください。

于 2012-09-18T13:36:40.983 に答える