Riordinare gli elementi di una lista tramite Drag and Drop con jQuery

di Daniele Bochicchio, in jQuery, ASP.NET 2.0, ASP.NET 3.5,

Attraverso jQuery.UI è possibile sfruttare un comodo sistema, chiamato sortable, che consente di applicare facilmente il drag&drog a liste, per consentire ad esempio di decidere la posizione di una ipotetica classifica in maniera visuale.

Una volta scaricato jQuery.UI, l'aggiunta del supporto per il drag&drop ad una serie di elmenti è semplice.
Per prima cosa è necessario comporre un markup che consenta facilmente di gestire dal punto di vista visuale questo comportamento, quindi è opportuno lavorare con uno stile che indichi chiaramente che l'elemento può essere trascinati. A questo scopo si presta bene un elenco puntato:

<ul id="tutorials">
<li id="1">ASP.NET</li>
<li id="3">ASP.NET 3.5</li>
<li id="4">ASP.NET 4.0</li>
<li id="99">Silverlight</li>
<li id="15">Entity Framework</li>
</ul>

Probabilmente l'ordinamento scelto dall'utente dovrà poi essere gestito lato server dalla nostra applicazione. Purtroppo, però, l'elenco puntato non viene inviato in post dal browser e pertanto diventa necessario prevedere un campo hidden in cui salvare questa informazione (nell'esempio allegato è un campo di tipo text affinché sia possibile vedere come varia al variare dell'ordinamento).
L'ID associato agli elementi è in questo caso l'ID dell'elemento all'interno del database, ma è possibile adottare tecniche alternative, l'importante è poi avere una strategia unica per salvare la posizione corrispondente nel database.

A questo punto è sufficiente scrivere un piccolo pezzo di codice che attivi l'ordinamento:

<script type="text/javascript"><!--
var setSelector = "#tutorials";
$(function() {
  $(setSelector).sortable({
    axis: "y",
    cursor: "move",
    update: function() { getOrder(); }
  });
  
  getOrder();
});

function getOrder() {
  $('#order').val($(setSelector).sortable("toArray"));
}
//--></script>

La funzione getOrder si occupa di salvare l'ordine corrente all'interno di un campo nascosto: a questo punto per inviare il valore direttamente al server è sufficiente inserire un pulsante di submit della form.
Questa tecnica è facilmente implementabile con ASP.NET grazie all'uso del controllo Repeater, che consente di produrre un markup con dati prelavati da database, sostituendo solo l'ID dove serve:

<asp:Repeater id="TutorialList" runat="server">
  <HeaderTemplate>
    <ul id="tutorials">
  </HeaderTemplate>
  <ItemTemplate>
     <li id="<%#Eval("ID")%>"><%#Eval("TutorialName")</li>
   </ItemTemplate>
  <FooterTemplate>
    </ul>
  </FooterTemplate>
</asp:Repeater>

Per maggiori informazioni su jQuery:
http://tags.aspitalia.com/jQuery/

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi