Hi everyone !
Handling list items and moving elements from one list to another, is a sort of functionality we often require.
Generally it is required for handling collection of items to be managed on the fly.
So I am talking about something like below (following is just a representation)
 

This can be easily developed using client side scripting and the results can be stored in a json,
which can then be passed to the server for other server side changes.

Follow the steps to have this kind of functionality:

Step-1: Html markup required

<div class='listManipulation'>
<div class='listContainers cols'>
<ul class='sourceList'>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
<div class='cols'>
<ul class='operators'>
<li> <button class='shiftToDest'>&gt;</button> </li>
<li> <button class='shiftAllToDest'>&gt;&gt;</button> </li>
<li> <button class='shiftAllToSource'>&lt;&lt;</button> </li>
<li> <button class='shiftToSource'>&lt;</button> </li>
</ul>
</div>
<div class='listContainers cols'>
<ul class='destList'>
</ul>
</div>
<div class='cols'>
<ul class='sortOperators'>
<li> <button class='shiftUp'>Up</button> </li>
<li> <button class='shiftDown'>Down</button> </li>
</ul>
</div>
</div>

.listContainers
{
	width:30%;
	display:block;
	border:1px solid black;
}
ul,li
{
	list-style:none;
	padding-left:0px;
}
.sourceList li, .destList li
{
 border: 1px solid #eee;
    margin: auto;
	margin-top:2px;
    padding: 3px;
	cursor:pointer;
    width: 90%;
}
.liselected
{
	background:rgba(131, 131, 186, 1);
	color:white;
}
.cols
{
	float:left;
	margin-left:5px;
	margin-right:5px;
	height:250px;
}
button
{
	cursor:pointer;
	border:1px solid black;
	background:#444;
	color:#FFF;
	margin-top:7px;
}
button:hover
{
	background:#999;
}

Step-3: Now the jquery

var $listManipulation=$('.listManipulation');
var $sourceList=$('.sourceList');
var $destList=$('.destList');

$('.sourceList li,.destList li').click(function(){
	$listManipulation.find('li').removeClass('liselected'); 
	$(this).addClass('liselected');                
});          
$('.shiftToDest').click(function(){
	var theLi=$listManipulation.find('.liselected');
	 $destList.append(theLi);
});
$('.shiftToSource').click(function(){
	var theLi=$listManipulation.find('.liselected');
	$sourceList.append(theLi);
});
$('.shiftAllToDest').click(function(){
	$destList.append($sourceList.html());                           
	$sourceList.html('');  
});
$('.shiftAllToSource').click(function(){
	$sourceList.append($destList.html());                           
	$destList.html('');  		
});
$('.shiftUp').click(function(){
	var theLi=$listManipulation.find('.destList .liselected');
	if(theLi && theLi.length>0){
		theLi.prev().before(theLi);
	}
});
 $('.shiftDown').click(function(){
	var theLi=$listManipulation.find('.destList .liselected');
	if(theLi && theLi.length>0){
		theLi.next().after(theLi);
	}
});