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

Attraverso jQuery.UI è possibile sfruttare un comodo sistema, chiamato sortable, che consente di applicare facilmente il drag & drog a liste.
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:

<scriptcolor: darkred;" lang="EN-GB">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 id="tutorials">

  </FooterTemplate>

</asp:Repeater>