Question

Here i am moving the whole li elements from one list to another list.What i need is to select a particular li element from one list and on button click it has to move to another list.
Here is my code

$(document).ready(function () {
    $("#add").click(function () {
        $("#list1 li").appendTo('#list2');
    });
});

and

<div>
    <asp:ListView ID="ListView1" runat="server">
        <LayoutTemplate>
            <ul id="list1" class="connectedSortable">
                <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder>
            </ul>
        </LayoutTemplate>
        <ItemTemplate>    
            <li class="ui-state-default" ><%# Eval("value") %></li>     
        </ItemTemplate>
    </asp:ListView>

    <asp:ListView ID="ListView2" runat="server">
        <LayoutTemplate>
            <ul id="list2" class="connectedSortable">
                <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder>
            </ul>
        </LayoutTemplate>
        <ItemTemplate>    
            <li class="ui-state-highlight" ><%# Eval("value2") %></li>     
        </ItemTemplate>
    </asp:ListView>
    <input id="add" name="add" type="button" value="add" /><br />
</div>

Any suggestion?

Answer 1

Sounds like a job for last().

$(document).ready(function () {
    $("#add").click(function () {
        $("#list1 li").last().appendTo('#list2');
    });
});

EDIT: To move a specific item:

$("#list1 li").click(function() {
    $(this).appendTo('#list2');
});

ADDITIONAL EDIT: To make a list item clickable, and then append that item when the Add button is clicked (not tested).

$("#list1 li").click(function() {
    $("list1 li.clicked").removeClass("clicked");
    $(this).addClass("clicked");
});
$("#add").click(function () {
    $("#list1 li.clicked").removeClass("clicked").appendTo('#list2');
});