Spotify的API拖放播放列表

我想创建一个使用Spotify的API的拖累和投掷的播放列表。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子元素，所以这没有工作了。

来源

2012-05-09 alex

问题不在于播放列表未使用ul和li元素显示。在jQuery UI的排序函数实际上包含一个标签，特别是如果（如与Spotify的情况下）一个标签有自己的显示样式设置为表一个DIV标签工作正常。你只需要告诉函数的孩子叫什么项目是通过使用类似排序：

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

，告诉它与类SP-项目可排序的链接。

然而，这样做的时候到现在仍然不工作，为项目快速返回到原来的位置。这是因为播放列表中的每一行都设置为使用绝对定位，并使用-webkit-transform CSS属性将其定位在正确的Y坐标处。这导致经历了“回弹”。

我已经找到了一种解决方法，但它是相当一个黑客。只要你设置列表可排序前添加如下代码：

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

这基本上将删除播放列表中的所有环节的“-webkit-改造”的风格和改变他们使用相对定位（超时是因为该列表在创建后似乎没有完全构建）。奇怪的是这似乎并没有影响到播放列表的显示可言，所以这让我不知道为什么有人喜欢这个工作......

来源

2012-05-22 20:18:10 StevenR

我前几天做这个确切的事情，对于下面的网站。向下滚动，单击选项卡，添加一些轨道以建立列表并拖放。

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-18 13:36:40 Barney

Spotify的API拖放播放列表

回答

相关问题