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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.