jQuery UI Sortable - sérialiser plusieurs colonnes

Question

J'ai un petit script qui me permet d'utiliser jQuery pour trier joliment les balises div entre 3 colonnes. Le jQuery peut être vu ci-dessous:

$(".column").sortable(
{ connectWith: '.column' }, 
{ update: function(event, ui) { alert($(this).sortable('serialize')) } 
}); 

Si je déplace un élément de la colonne 1 à la colonne 2, il affiche 2 alertes, indiquant les données sérialisés pour les 2 colonnes affectées. Le problème est, j'ai besoin de connaître les id de colonne aussi, ainsi je peux finalement enregistrer les données dans une base de données. À l'heure actuelle, s'il est possible de simplement afficher l'identifiant de la colonne dans une alerte, cela me suffira pour continuer.

Answer 1

$(".column").sortable(
    { connectWith: '.column' }, { update: function(event, ui) { 
    alert($(this).sortable('serialize')); 
    alert($(this).parents('.column').attr(id)); 
    } 
}); 

Je pense que cela devrait fonctionner. Trouver la colonne parente du div que vous avez déplacé, puis convertir son attribut id.

Answer 2

obtenu ce travail en utilisant la méthode "plus proche":

{mise à jour: (. $ (This) .closest ("div") attr ("id")) function (event, ui) { alerte ; alert ($ (this) .sortable ('sérialiser')) }

Answer 3

Vous venez de résoudre ce problème avec une astuce très très sale. Comme pour le partager avec vous, peut-être que ça aide.

<div class="column" > 
    <div class="portlet" id="portlet_1_name"> 
    <div class="portlet-header">Title1</div> 
    <div class="portlet-content">Text</div> 
    </div> 
    <div class="portlet" id="portlet_2_name"> 
    <div class="portlet-header">Title2</div> 
    <div class="portlet-content">Text</div> 
    </div> 
</div> 
<!-- for debug --> 
<div id="serial"></div> 

etc ...

var out = ""; 

$('.portlet').each(function(index) { 
    out += $(this).attr('id') + ','; 
}); 

$("#serial").html(out); 
// or alert(out) if you like 

Answer 4

Je cherchais une bonne réponse à cette question et aucun de ceux sur ici étaient vraiment exactement ce que je voulais, donc je vais partager la façon dont je l'ai fait il:

$('ul.playerList').each(function() { 
    var id = $(this).attr('id'); // get element id 
    window[id] = $(this).sortable("serialize",{key:id}); // make global var w/ data 
}); 

// you could make this more dynamic if you have a lot of lists 
var data = ul_id_1 + "&" + ul_id_2 + "&" + ul_id_3 + "&action=other_vars"; 

$.post(url,data,function(resp) { 
    $("#test").html(resp); 
});