Looking for some assistance with a web development issue I'm facing. Here's the scenario: I have two sections on my webpage - TOP and BOTTOM. In the bottom section, there are 3 list records each with a checkbox and button.
What I need help with is when I click on the button, the selected record should be added to the TOP section.
If anyone could provide guidance or solutions, it would be greatly appreciated. Thank you in advance!
Html code
<div style="border:1px solid #eee;">
<ol style='list-style:decimal;border-bottom:1px solid #e7e7e7;' id="sortable">
</ol> <br/>
</div>
<br/>
<div>
<ul id="draggable">
<li style="height:auto;padding:5px 0;line-height:normal;border-bottom:1px solid #e7e7e7;list-style:none;">
<div class="qitem" style='margin-bottom : 20px;'>
<label>
<input class="hello" type="checkbox"/>Value 1
</label>
<button class="hello" style="float:right;">Add To Top Section</button>
</div>
</li>
<li style="height:auto;padding:5px 0;line-height:normal;border-bottom:1px solid #e7e7e7;list-style:none;">
<div class="qitem" style='margin-bottom : 20px;'>
<label>
<input class="hello" type="checkbox"/>Value 2
</label>
<button class="hello" style="float:right;">Add To Top Section</button>
</div>
</li>
<li style="height:auto;padding:5px 0;line-height:normal;border-bottom:1px solid #e7e7e7;list-style:none;">
<div class="qitem" style='margin-bottom : 20px;'>
<label>
<input class="hello" type="checkbox"/>Value 2
</label>
<button class="hello" style="float:right;">Add To Top Section</button>
</div>
</li>
</ul>
</div>
JQuery Code
$(document).ready(function()
{
$("#sortable").sortable({
revert: true,
refreshPositions: true ,
helper : 'clone',
tolerance: 'pointer',
revert: 20
});
$("#sortable").disableSelection();
$(".qitem").draggable({
tolerance:"pointer",
helper : 'clone',
refreshPositions: true ,
revert : 'invalid',
opacity:.4,
});
$("#sortable").droppable({
revert:true,
hoverClass : 'ui-state-highlight',
greedy: true,
refreshPositions: true,
drop : function(ev, ui)
{
$(ui.draggable).clone().appendTo(this);
if($(this)[0].id === "sortable")
{
console.log($(this).closest("button").find('.hello'));
$(this).find('.hello').hide();
$(this).find('.AH_section').show();
ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul'));
return true;
}
}
});
});