Spotify API 拖放播放列表答案

【问题标题】：Spotify API Drag & Drop playlistsSpotify API 拖放播放列表
【发布时间】：2012-05-09 19:47:50
【问题描述】：

我想使用 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 子元素，所以这行不通。

【问题讨论】：

标签： jquery-ui drag-and-drop jquery-ui-sortable spotify

【解决方案1】：

问题不在于播放列表没有使用 ul 和 li 元素显示。 jQuery UI 可排序函数实际上适用于包含 a 标签的 div 标签，特别是如果（就像 Spotify 一样）~~a 标签将它们的 display 样式设置为 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”样式，并将它们更改为使用相对定位（超时是因为列表在创建后似乎没有立即完全构建）。奇怪的是，这似乎根本不影响播放列表的显示，所以我想知道为什么会这样......

【讨论】：

【解决方案2】：

几天前我为下面的网站做了这件事。向下滚动，单击选项卡，添加一些曲目以建立一个列表并拖放。

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

相关代码位于http://cultureclash.redbull.co.uk/getonstage/js/getonstage-ui.js，从第 106 行开始。播放列表本身作为曲目数组存储在其他地方，就像 Spotify 拥有它们一样。

当用户添加轨道时，我抓取该数组并将其放入模板以生成可排序的 DOM，然后我为每个 li 赋予 data-index 属性以跟踪原始数组的哪个索引他们代表。当sortstop 事件触发时，我会遍历ul，记下新顺序，然后移动数组以匹配。

更深入地查看该文件并使用 DOM 检查器处理应用程序以找出更精细的细节。

【讨论】：