Obtenir JQuery UI Sortable pour travailler sur les éléments de la liste ListView asp.net?

Question

J'ai le ListView suivant dans lequel j'utilise la fonction triable UI JQuery pour pouvoir trier les éléments dans ListView. Le problème est que je ne peux pas mettre une classe sortable sur la table dans le ItemTemplate parce que ça ne marche pas, si je mets un class = "sortable" sur le div externe, ça marche, mais ça me permet de tout trier dans le ListView, je veux juste pouvoir déplacer les tables. Voici le balisage

<div> //Works here, but hr's become sortable too. 
      <asp:ListView ID="lvwDocuments" runat="server"> 
       <LayoutTemplate> 
        <h3> 
         Documents</h3> 
         <asp:PlaceHolder ID="itemPlaceHolder" runat="server"> 
         </asp:PlaceHolder> 
       </LayoutTemplate> 
       <ItemTemplate> 
        <table class="sortable"> //Does not work Here 
         <tr> 
          <td> 
           <p class="title"> 
            <a runat="server" href='<%#Eval("url") %>'> 
             <%#Eval("title") %></a></p> 
           <br /> 
           <p> 
            <%#Eval("description") %></p> 
          </td> 
         </tr> 
        </table> 
       </ItemTemplate> 
       <ItemSeparatorTemplate> 
        <hr /> 
       </ItemSeparatorTemplate> 
     </div> 

Aussi, Comment puis-je conserver l'ordre de tri, même après que la page est actualisée.

Answer 1

Pour que le triable fonctionne, vous devez l'appliquer à l'élément parent (généralement un div).

Dans l'utilisation des appels triables les propriétés suivantes:

$(".sortable").sortable({ items: "table" }); 

Ordre de tri peut être conservée en utilisant un HiddenField et en attribuant sa valeur à:

$(".sortable").sortable("toArray"); 

Ensuite, en utilisant cette valeur pour commander votre listview .

Il y a cependant un problème avec cette approche. Les ressources humaines ne sont pas triables, vous ne pouvez donc pas placer d'éléments entre eux. Il serait préférable d'utiliser une plongée autour de votre table qui avait une heure en bas.

<div class="sortable"> 
    <div class="item"> 
     <table> ... </table> 
     <hr /> 
    </div> 
</div>