挑 <li> 从div1，按钮单击，移动到div2

Question

我知道对于有javascript经验的人来说，这将是一件容易的事，但我正在画一个空白。

我有一个项目列表：

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

我想突出显示（更改背景颜色）左侧所选列表项，然后单击按钮，将所选项目移动到右侧div，最后更改背景颜色。

我在网上看过很多很多次。 但不能为我的生活，想出怎么做。

Answer 1

我首先在你的右侧div添加一个空的<ul></ul> ，然后使用：

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

jsFiddle例子

Answer 2

像这样的东西（jquery）应该可以做到这一点：

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

正如您所看到的，代码确实非常直截了当。

我还设置了一个小例子来演示： http ： //jsfiddle.net/NbcS9/

编辑：
如果您只想在左侧选择单个项目，则可以执行以下操作：

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

更新的小提琴： http ： //jsfiddle.net/NbcS9/1/

Answer 3

你可以试试这个

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

使用纯JavaScript会很难做到这一点，但使用JQuery可以很容易地做到这一点。 将单击事件添加到两个div，它们将另一个的选定文本附加到自身。 获取所选数据添加如下函数：

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

另外，我会研究Jquery Draggable（）。 听起来像是与你想要的最终结果有关的东西。 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'));
});