1

我想使用 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子元素，所以这没有奏效。

4

2 回答 2

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 回答
0

问题不在于播放列表未使用ul和li元素显示。jQuery UI 可排序函数实际上适用于包含a标签的div标签，特别是如果（就像 Spotify 一样）a标签的显示样式设置为table。您只需要使用以下内容告诉函数哪些子项是可排序的：

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

这告诉它与sp-item类的链接是可排序的。

但是，这样做时它仍然无法正常工作，因为项目会弹回原始位置。这是因为播放列表中的每一行都设置为使用绝对定位并使用 -webkit-transform CSS 属性将其定位在正确的 Y 坐标上。这导致经历了“回弹”。

我已经找到了一个解决方法，尽管它是一个 hack。只需在将列表设置为可排序之前添加以下代码：

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

这基本上从播放列表中的所有链接中删除了“-webkit-transform”样式并将它们更改为使用相对定位（超时是因为列表在创建后似乎没有立即完全构建）。奇怪的是这似乎根本不影响播放列表的显示，所以我想知道为什么会这样......

于 2012-05-22T20:18:10.777 回答