Dynamiquement Ajouter des éléments à jQuery Sortable

Question

Cela devrait être ma dernière question sur Jquery Sortable ... pendant un certain temps :)

J'ai une liste que je suis en mesure de supprimer des éléments de manière dynamique. lorsque les utilisateurs cliquez sur la case Fermer X sur l'élément, je reçois le parent (l'élément lui-même) et retirez-le:

function DeleteLink() { 
     var jItem = $(this).parent(); 

     var LinkId = jItem[0].childNodes[1].innerText || jItem[0].childNodes[3].textContent; 
     var LinkTitle = jItem[0].childNodes[2].innerText || jItem[0].childNodes[5].textContent; 

     if (!confirm(String.format("Are you sure you want to delete link #{0}?\n\nTitle: {1}", LinkId, LinkTitle))) 
      return; 

     jItem.remove(); 
     $.post("/Home/DeleteLink/" + LinkId); 
     showStatus("Link deleted...", 5000); 
    } 

Si vous êtes intéressé, liste non ordonnée est créée comme ceci:

<ul id="sortable1" class="connectedSortable"> 
     <% foreach (Link l in Model) 
      { 
       if (l.Visible == true) 
       {%> 
        <li class="photolistitem" style="min-height:50px;"> 
        <div class="imagecontainer"><img src="/Content/images/link.jpg" style="float:left; padding-right:5px;" class="thumbnailimage" alt="" /></div> 
        <div id='<%=l.Id%>Id'><%=l.Id%></div> 
        <div id='<%=l.Id%>Description'><%=l.Title%></div> 
        <div id='<%=l.Id%>Description'><%=l.Description%></div> 
        <div id='<%=l.Id%>Description'><%=l.Url%></div> 
        <div class='deletethumbnail'>X</div> 
        </li> 
       <%}%> 
     <%}%> 
    </ul> 

Ce que je veux faire est d'avoir un formulaire en bas de la page pour qu'un utilisateur puisse ajouter dynamiquement un élément - Ils auront seulement besoin d'insérer une description, un titre et une url (je vais utiliser un autre plugin jquery pour valider l'entrée).

Je pense que le plus grand défi sera de créer dynamiquement un objet qui peut être ajouté à la liste. Quelqu'un peut-il me pointer dans la bonne direction pour cela?

Answer 1

jQuery

thisDependant = $('.DependantTemplate').clone(); 
$(thisDependant).removeClass("DependantTemplate"); 
$(thisDependant).addClass("Dependant" + dependantNum); 
$('.DependantList').append(thisDependant); 

HTML

<div class="DependantTemplate hidden"> 
    <div style="float:left;" class="DependantNumber spacerRight10"></div> 
    <div style="float:left;" class="DependantFirstName spacerRight10"></div> 
    <div style="float:left;" class="DependantLastName spacerRight10"></div> 
    <div style="float:left;" class="DependantDateOfBirth spacerRight10"></div> 
    <div style="float:left;" class="DependantGender spacerRight10"></div> 
    <div style="float:left;" class="DependantType"></div> 
    <div class="clearFloats"></div> 
</div> 

<div class="DependantList"></div> 

Ce qui précède est ce que j'utilise pour faire la même chose que vous cherchez.