Динамически добавлять элементы в jQuery Sortable - PullRequest
Новая
       10

Динамически добавлять элементы в jQuery Sortable

3 голосов
/ 08 января 2010

Это должен быть мой последний вопрос о Jquery Sortable ... какое-то время:)

У меня есть список, из которого я могу динамически удалять элементы. когда пользователи нажимают X закрыть окно на элементе, я получаю родителя (сам элемент) и удаляю его: 

    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);
    }

Если вам интересно, неупорядоченный список создается так: 

<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>

То, что я хочу сделать, - это создать форму внизу страницы, чтобы пользователь мог динамически добавлять элемент - ему нужно будет только вставить описание, заголовок и URL (я буду использовать другой jquery плагин для проверки ввода).

Я думаю, что самой большой проблемой будет динамическое создание объекта, который можно добавить в список. Кто-нибудь может указать мне правильное направление для этого?

1 Ответ

2 голосов
/ 08 января 2010

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>

Выше я использую то же самое, что и вы.

...