Listes de lecture Spotify de l'API glisser-déposer

Question

Je veux créer une liste de lecture par glisser-déposer à l'aide de l'API Spotify.

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

Comment puis-je faire de cette playlist activée pour glisser-déposer les pistes? Est-ce déjà intégré à l'API Spotify (mais pas encore documenté)? J'ai essayé de l'implémenter moi-même en utilisant la fonction triable de l'interface utilisateur jQuery.

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

Cependant, listes de lecture Spotify ne sont pas simples éléments enfants ul et li, donc cela ne fonctionne pas.

Answer 1

Le problème n'est pas que la playlist ne soit pas affichée en utilisant ul et li éléments. La fonction triables jQuery UI fonctionne réellement bien avec une balise div contenant un balises, en particulier si (comme cela est le cas avec Spotify) les un balises ont leur affichage style défini à tableau. Il vous suffit de dire la fonction quels éléments enfants sont triables en utilisant quelque chose comme:

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

qui lui indique que les liens avec la classe de sp-point sont triables. Toutefois, cela ne marche toujours pas lorsque vous le faites lorsque les éléments reviennent aux positions d'origine. En effet, chaque ligne de la liste de lecture est définie pour utiliser le positionnement absolu et utilise la propriété CSS -webkit-transformer pour la positionner aux coordonnées Y correctes. Cela se traduit par le "snap-back" expérimenté.

J'ai trouvé une solution de contournement pour cela, même si c'est plutôt un hack. Ajoutez simplement le code suivant avant de définir la liste sortable:

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

Cela supprime essentiellement le style « -webkit transformée » de tous les maillons de la liste de lecture et les changements à utiliser le positionnement relatif (le délai d'attente est parce que la liste ne semble pas être entièrement construite immédiatement après l'avoir créée). Curieusement, cela ne semble pas du tout affecter l'affichage de la playlist, donc je me demande pourquoi cela a été fait comme ça ...

Answer 2

J'ai fait exactement la même chose il y a quelques jours, pour le site ci-dessous. Faites défiler vers le bas, cliquez sur les onglets, ajouter quelques pistes pour construire une liste et faites glisser et déposez.

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

Le code est pertinent à http://cultureclash.redbull.co.uk/getonstage/js/getonstage-ui.js partir de la ligne 106. La liste de lecture est stockée quelque part ailleurs comme un réseau de pistes codées comme Spotify les a. Lorsque l'utilisateur ajoute une piste, j'attrape ce tableau et le passe à travers un modèle pour générer le DOM pour le sortable, puis j'attribue data-index attributs à chaque pour garder trace de l'index du tableau original qu'ils représentent. Lorsque l'événement sortstop se déclenche, je passe par le ul, notez le nouvel ordre et déplacez le tableau pour qu'il corresponde.Jetez un coup d'oeil plus profond à ce fichier et jouez avec l'application en utilisant un inspecteur DOM pour travailler les détails les plus fins.