+
+
+Click any of the blue boxes to copy to the other stack.
+Click a box in the other stack to remove it completely.
+
+
+
+
+-
+
- Dog +
- Cat +
- Fish +
- Bird +
-
+
- Wheelbarrow +
- Ice Cream Cone +
Setting up the HTML
+First we need some HTML to work with.
+<ul id="demo"> + <li>Dog</li> + <li>Cat</li> + <li>Fish</li> + <li>Bird</li> +</ul> + +<ul id="demo2"> + <li>Wheelbarrow</li> + <li>Ice Cream Cone</li> +</ul>+ +
Using DOM Methods
+Most common DOM methods are available via Node instances. These can be used to add, remove, and retrieve other nodes.
+clone = item.cloneNode(true);
+list2.append(clone);
+item.remove(); // sugar for item.get('parentNode').removeChild(item);
+
+
+Complete Example Source
+<style>
+.example ul {
+ vertical-align: top;
+}
+</style>
+<ul id="demo">
+ <li>Dog</li>
+ <li>Cat</li>
+ <li>Fish</li>
+ <li>Bird</li>
+</ul>
+
+<ul id="demo2">
+ <li>Wheelbarrow</li>
+ <li>Ice Cream Cone</li>
+</ul>
+
+<script type="text/javascript">
+YUI().use('node', function(Y) {
+ var list2 = Y.one('#demo2');
+
+ var onList1Click = function(e) {
+ var item = e.currentTarget;
+
+ if (list2.getStyle('display') === 'none') {
+ list2.show();
+ }
+
+ list2.append(item.cloneNode(true));
+
+ };
+
+ var onList2Click = function(e) {
+ var item = e.currentTarget;
+
+ item.remove(); // sugar for item.get('parentNode').removeChild(item);
+
+ if (list2.all('li').size() < 1) { // hide the list if its empty
+ list2.hide();
+ }
+
+ };
+
+ Y.one('#demo').delegate('click', onList1Click, 'li');
+ Y.one('#demo2').delegate('click', onList2Click, 'li');
+});
+</script>
+
+