I need some help with a specific assignment. The back end code is all set, but I'm struggling with the UI component. The task requires two tree views, one on the left and one on the right. The left tree view will contain states with multiple children, while the right tree starts empty. There are two buttons - Include and Exclude. When a child from the left tree is selected and included, it should move to the right tree. If the user decides to move it back, it must return to the same position under the same parent. Additionally, each child can only exist once to avoid duplicates when moving them to new parents.
For this task, I have the flexibility to use HTML, CSS, JavaScript, and jQuery.
Below is my current approach:
CSS
#menutree li {
list-style: none;
}
li .menu_label + input[type=checkbox] {
opacity: 0;
}
li .menu_label {
cursor: pointer;
}
li .menu_label + input[type=checkbox] + ol > li
{
display: none;
}
li .menu_label + input[type=checkbox]:checked + ol > li
{
display: block;
}
.selected {
background-color:#efefef;
}
jQuery
$('#move_left').click(function() {
$('.list1').append($('.list2 .selected').removeClass('selected'));
});
$('#move_right').click(function() {
$('.list2').append($('.list1 .selected').removeClass('selected'));
});
$('body').on('click', 'li', function() {
$(this).toggleClass('selected');
});
HTML
<body>
<ol id="menutree">
<li>
<label class="menu_label" for="c1">Menu Gen14 Am0a1</label>
<input type="checkbox" id="c1" />
<ol>
<li>
<ul class="list1">
<li class="page">Page Ap1a1</li>
<li> Page Ap1a2</li>
</ul>
</ol>
</ol>
</body>
<input type='button' value='<<' id='move_left'/>
<input type='button' value='>>' id='move_right'/>