Ultime notizie
Home » Programmazione » .Net Framework » Riordinare gli elementi di una lista tramite Drag and Drop con jQuery

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>


About Luigi Melisi

Analista Programmatore Senior, Team Leader in svariati progetti, con esperienza decennale in analisi, progettazione e sviluppo di software gestionale desktop e web, di E-Commerce e sistemi di Content Management System.In questi anni ho utilizzato in prevalenza tecnologie Microsoft (Visual C#, ASP.NET, SQL Server, Visual Studio, Windows Mobile, ecc.) e programmazione orientata agli oggetti, ma ho maturato esperienza anche in altre tecnologie come Java e PHP.Attualmente mi occupo di consulenza informatica, di sviluppo software gestionale personalizzato, realizzazione di Siti Web, di sistemi di Content Management System. ed E-Commerce su misura del cliente.

Check Also

Come ricavare il dominio di primo livello dell’indirizzo attuale

Se ti si presenta la necessità di sapere come ricavare il dominio di primo livello …

Lascia un commento

%d blogger hanno fatto clic su Mi Piace per questo: