[英]Pick <li> from div1, on button click, move to div2
I know this is going to be an easy thing to do for someone with javascript experience, but I'm drawing a blank. 我知道对于有javascript经验的人来说,这将是一件容易的事,但我正在画一个空白。
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. 我想突出显示(更改背景颜色)左侧所选列表项,然后单击按钮,将所选项目移动到右侧div,最后更改背景颜色。
I've seen this many, many times online. 我在网上看过很多很多次。 But can't for the life of me, come up with how to do it.
但不能为我的生活,想出怎么做。
I'd start by adding an empty <ul></ul>
to your right side div, then use this: 我首先在你的右侧div添加一个空的
<ul></ul>
,然后使用:
$('#left-side li').click(function () {
$(this).toggleClass('selected');
});
$('#addElement').click(function () {
$('#left-side li.selected').appendTo($('#right-side ul'));
});
Something like this (jquery) should do the trick: 像这样的东西(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);
});
As you can see the code is indeed pretty straigh forward. 正如您所看到的,代码确实非常直截了当。
I also set up a small example to demonstrate: http://jsfiddle.net/NbcS9/ 我还设置了一个小例子来演示: 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/ 更新的小提琴: http : //jsfiddle.net/NbcS9/1/
Using pure JavaScript would be tricky to do this, but using JQuery you can do this sort of easily. 使用纯JavaScript会很难做到这一点,但使用JQuery可以很容易地做到这一点。 Add click events to the two divs which would append the selected text of the other to itself.
将单击事件添加到两个div,它们将另一个的选定文本附加到自身。 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(). 另外,我会研究Jquery Draggable()。 sounds like something that could relate to your desired end result.
听起来像是与你想要的最终结果有关的东西。 http://jqueryui.com/draggable/
http://jqueryui.com/draggable/
css: CSS:
.highlighted { background: yellow; }
html: 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: 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'));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.