Déplacer vers le haut et Déplacer vers le bas les éléments dans la zone de liste

Question

J'ai certains éléments remplis dans la zone de liste à partir de la base de données dans mon application asp.net mvc (C#).

Je dois donner une option pour monter/descendre les éléments dans la liste et les stocker dans la base de données avec l'ordre mis à jour. J'aime utiliser jquery pour monter/descendre les éléments dans la listbox. Quel est le meilleur moyen/soultion de le faire? Ou est-il la meilleure méthode pour le faire autre que de l'utiliser avec listbox?

Answer 1

Je n'ai pas le code mais il y a plusieurs exemples sur le web de div en mouvement utilisant jQuery. Ma suggestion serait de laisser tomber la boîte de liste en faveur de certains divs mobiles ou quelque chose.

Something like this might help you. il utilise une liste je pense et vous permet de les réorganiser. Vous pouvez alors jQuery le nouvel ordre et le stocker dans la base de données.

Answer 2

Vous pouvez déplacer le côté client des éléments avec quelque chose comme:

  $("#btnMoveSectionUp").click(function (e) { 
      var curr = $("#<%= lstEditReportSections.ClientID %> option:selected"); 
      if (curr.length == 0) return; 
      if (curr.index() > 0) { 
       var prev = curr.prev(); 
       curr.insertBefore(prev); 
      } 
     }); 
      $("#btnMoveSectionDown").click(function (e) { 
      var curr = $("#<%= lstEditReportSections.ClientID %> option:selected"); 
      if (curr.length == 0) return; 
      if (curr.index() < $("#<%= lstEditReportSections.ClientID %> option").length - 1) { 
       var next = curr.next(); 
       curr.insertAfter(next); 
      } 
     }); 

Mais le serveur ne verra pas les modifications apportées sur le client. Ce que j'ai fait était d'utiliser ce code pour stocker toutes les valeurs dans un champ caché, puis le diviser sur le côté serveur.

  $("#<%= btnSaveReport.ClientID %>").click(function (e) { 
      if (confirm("Are you sure you want to save the report?") != true) return false; 
      var sections = $("#<%= lstEditReportSections.ClientID %> option").map(function() { 
       return $(this).val(); 
      }).get().join('#'); 
      $("#<%= hidEditReportSectionsList.ClientID %>").val(sections); 
     }); 

Il ne peut pas être idéal, mais il a fait l'affaire pour moi.