Javascript 从div1中拾取，单击按钮，移动到div2

我知道对于有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，最后更改回背景色

---

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

我会先在你的右侧div中添加一个空div，然后使用以下命令：

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

你可以试试这个

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

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

---

类似这样的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);
});

正如您所看到的，代码确实非常复杂

我还举了一个小例子来说明：

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

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

和最新的小提琴：

---

使用纯JavaScript很难做到这一点，但使用JQuery可以轻松做到这一点。将单击事件添加到两个div，这两个div会将另一个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;
}

此外，我还将研究jquerydraggable。听起来可能与你想要的最终结果有关

css：

  .highlighted { background: yellow; }

html:

---

突出显示左侧的所选列表项是什么意思？您使用的是jQuery还是纯javascript？您查看了吗？您可能有兴趣了解有关列出的第一个函数的更多信息。突出显示的意思是简单地更改背景颜色，以便用户知道选择了哪个li。@RômuloSpier或+1。它不强制执行单个选择，但仍然很优雅。@SeanBright-我不认为这是一个要求，一次选择多个可以被视为一个积极因素。但是如果是这种情况，添加$left-side li.notthis.removeClass'selected'；在$this.toggleClass'selected'之前；我会补救的。这不是一个要求，但从用户体验的角度来看，我认为这将是预期的行为。虽然我确实看到了能够选择多个项目的好处。@SeanBright我需要这样做，因为用户只能选择一个项目，一些处理会继续进行，然后它会添加到右侧。谢谢你的小道消息，真有趣。。在这里提供的所有答案中，有一些元素构成了一个伟大的解决方案。active vs selected remove active state active=文本颜色用于细微验证干得好@彼得很好！我就是这么想的。需要做哪些更改才能一次只选择左侧的一个项目？我现在有了Dragable，但要让它与我们的Grails应用程序一起工作，这是一个P.I.T.a.所以现在回到按钮。

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

$('#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'));
});