Pick <li> from div1, on button click, move to div2

Question

I know this is going to be an easy thing to do for someone with javascript experience, but I'm drawing a blank.

I have a list of items:

<div id="left-side">
    <ul>
        <li><div>Item 1</div></li>
        <li><div>Item 2</div></li>
    </ul>
</div>

<input id="addElement" type="button" value="->"/>

<div id="right-side">
</div>

I would like to highlight(change the background color) the selected list item on the left and then on a click of the button, move the selected item to the right div, and finally changing the background color back.

I've seen this many, many times online. But can't for the life of me, come up with how to do it.

Answer 1

I'd start by adding an empty <ul></ul> to your right side div, then use this:

$('#left-side li').click(function () {
    $(this).toggleClass('selected');
});
$('#addElement').click(function () {
    $('#left-side li.selected').appendTo($('#right-side ul'));
});

jsFiddle example

Answer 2

Something like this (jquery) should do the trick:

// make the items selectable by toogling an 'active' class
$('#left-side li').click(function() {
     $(this).toggleClass('active');   
});

// on click of the move button
$('#addElement').click(function() {
    // get the items to move
    var $items =  $('#left-side li.active');
    // remove their active state
    $items.removeClass('active');
    // append them to the right side list
    $('#right-side ul').append($items);
});

As you can see the code is indeed pretty straigh forward.

I also set up a small example to demonstrate: http://jsfiddle.net/NbcS9/

edit:
If you only want to be able to only select a single item on the left, you could do something like this in stead:

// make the items selectable by toogling an 'active' class
$('#left-side li').click(function () {
    // remove active class from all other items
    $('#left-side li').not($(this)).removeClass('active');
    // toggle the active class on the clicked item
    $(this).toggleClass('active');
});

And the updated fiddle: http://jsfiddle.net/NbcS9/1/

Answer 3

You may try this

$(function(){
    $('#left-side ul li').on('click', function(){
        $(this).toggleClass('selected');
    });

    $('#addElement').on('click', function(){
        $('#left-side ul li.selected').appendTo($('#right-side ul'));
    });
});

DEMO.

Answer 4

Using pure JavaScript would be tricky to do this, but using JQuery you can do this sort of easily. Add click events to the two divs which would append the selected text of the other to itself. to get the selected data add a function like this:

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

Also, I would look into Jquery Draggable(). sounds like something that could relate to your desired end result. http://jqueryui.com/draggable/

Answer 5

css:

  .highlighted { background: yellow; }

html:

<div id="left-side">
    <ul>
        <li><div>Item 1</div></li>
        <li><div>Item 2</div></li>
    </ul>
</div>

<input id="addElement" type="button" value="->"/>

<div id="right-side">
    <ul></ul>
</div>

JS:

$('#left-side').find('li').on('click', function(event) {

     $(this)
        .siblings().removeClass('highlighted')
        .end()
        .addClass('highlighted');

});


$('#addElement').on('click', function(event) {
    event.preventDefault();
    $('#left-side').find('li.highlighted').appendTo('#right-side ul'));
});