Left hand side and right hand side listboxes with add one, add all, remove one, remove all buttons in the middle

I have a left-hand side (lhs) list box and right-hand side (rhs) list box I want to be able to select items in the lhs listbox and add one or all of them to the rhs listbox. Then I'd also like a remove one or all from the rhs returning them to the lhs. How would I accomplish this? So far, I can only manage getting the index value of the lhs box to the right but it won't take the actual item name for some reason. This is the code that does that:

    private void SelectOne_Click(object se开发者_StackOverflow社区nder, RoutedEventArgs e)
    {
        listBoxFin.ItemsSource = listBoxStart.SelectedIndex.ToString();          
    }

Hi this is not the final solution but this will help you lot.

Working DEMO.

HTML

<div class="wrapper">
<div class="selectbox alignleft">
    <ul id="selection" class="cf">
        <li>One <span class="desc">Description</span></li>            
        <li>...</li>
        <li>...</li>
    </ul>
</div>
<div class="movebutton alignleft">
    <input class="button mover" value=">>" type="button" />
</div>
<div id="moving" class="movebox alignleft">
    <ul class="cf">
        <li>One <span class="desc">Description</span>

        </li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
</div>
<div class="alignleft">
    <input class="button" id="move-up" type="button" value="Up" />
    <input class="button" id="move-down" type="button" value="Down" />
</div>

CSS

.cf:before, .cf:after {
    content:"";
    display: table;
}
.cf:after {
    clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
 .cf {
    zoom: 1;
}
/* general purpose classes */
 .nodisplay {
    display: none;
}
.nodisplay_strict {
    display: none !important;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.button {
    cursor: pointer;
    background: #eee;
    border: 0;
    min-width: 116px;
    padding: 5px 0;
    margin-bottom: 2px;
    display: block;
}
body {
    padding: 25px;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 12px;
}
li {
    display: block;
    cursor: pointer;
    padding: 5px;
    font-weight: bold;
    position: relative;
    border-bottom: 1px solid #fff;
}
li.active {
    background: #000;
    color: #fff;
}
.wrapper {
    width: 960px;
    margin: 0 auto;
}
.selectbox {
    border: 1px solid;
    width: 150px;
    min-height: 199px;
    max-height: 199px;
    overflow-y: auto;
    position: relative;
}
.movebox {
    border: 1px solid;
    width: 200px;
    min-height: 199px;
    max-height: 199px;
    overflow-y: auto;
    position:relative;
    margin-left: 10px;
    margin-right: 10px;
}
span.desc {
    display: block;
    padding-top: 5px;
    color: #7a7a7a;
    font-weight: normal;
    font-style: italic;
}
li.active span.desc {
    color: #ccc;
}
.movebox .delete, .movebox .unmoved {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 999;
    background:url(icon-close.png) no-repeat 0 0 red;
    width: 10px;
    height: 10px;
    text-indent: -99999px;
}
.movebutton {
    margin-left: 10px;
}
.movebutton .mover {
    background: url(icon_right.png) no-repeat 0 0 #eee;
    height: 48px;
    margin: 65px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}
.moved {
    background: #d9fffe;
}
#move-up {
    background: url("icon_up.png") no-repeat 0 0 #eee;
    height: 48px;
    margin: 0px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}
#move-down {
    background: url("icon_down.png") no-repeat 0 0 #eee;
    height: 48px;
    margin: 15px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}

JavaScript

// JavaScript Document
$(document).ready(function (e) {
    $('.selectbox li, .movebox li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });


    $('.mover').click(function () {
        $('.selectbox li.active').addClass('moved').prependTo('.movebox ul').prepend('<span class="delete alignright" onclick="moveToLHS(this);">DELETE</span>');
    });

    $('.mover').click(function () {
        $('.selectbox li.active').addClass('moved');
        $('.movebox li.active').removeClass('active');
        setTimeout(function () {
            $('.movebox li').removeClass('moved');
        }, 1500);
    });

    $('.movebox ul li').each(function () {
        $(this).prepend('<span class="unmoved alignright" onclick="deleteFromRHS(this);">DELETE</span>');
    });

    $("#move-up").click(moveUp);
    $("#move-down").click(moveDown);
    $("#reset-list").click(resetList);

});


//DELETE
function moveToLHS(t) {
    $(t).parent().remove().prependTo('.selectbox ul');
    $('.selectbox li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });

    //deleting span
    $('.selectbox ul li .delete').each(function () {
        $(this).remove();
    });


}

function deleteFromRHS(d) {
    $(d).parent().remove();
}


// LI Up Down
function moveUp() {
    $("#moving li.active").each(function () {
        var listItem = $(this);
        var listItemPosition = $("#moving li").index(listItem) + 1;

        if (listItemPosition == 1) return false;

        listItem.insertBefore(listItem.prev());
    });
}

function moveDown() {
    var itemsCount = $("#moving li").length;

    $($("#moving li.active").get().reverse()).each(function () {
        var listItem = $(this);
        var listItemPosition = $("#moving li").index(listItem) + 1;

        if (listItemPosition == itemsCount) return false;

        listItem.insertAfter(listItem.next());
    });
}

function resetList() {
    $("#moving").html(originalItems);
}

Working DEMO

As H.B. noted, there are many ways this could be accomplished. Probably the most widely acclaimed architecture for WPF is MVVM, so I'll try to outline a solution with respect to my understanding of that architecture.

The ViewModel will expose a few different properties: LHSList, LHSSelectedItem, RHSList, RHSSelectedItem (collections are ObservableCollections here) as well as a few commands - MoveLHSSelectedToRHS, MoveLHSToRHS, MoveRHSSelectedToRHS, MoveRHSToLHS.

The lists are simple bindings to the ListViews in the View, and the SelectedItem's of those ListViews are also bound accordingly. The commands simply operate on the lists and the selected items. For example, MoveLHSSelectedToRHS would be a command with an action something like:

public void OnMoveLHSSelectedToRHS() { if(LHSSelectedItem==null) return; RHSList.Add(LHSSelectedItem); LHSList.Remove(LHSSelectedItem); LHSSelectedItem=null; }

Unfortunately, it looks like you are using code behind at the moment. If you are not familiar with MVVM, I'd suggest looking into Josh Smith's WPF articles - they're a great place to start!