Cuando clicamos seleccionamos uno o varios items.
Estos items podemos pasarlos de una lista a otra.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#seleccionable ul li").click(function(){
$(this).toggleClass("seleccionado")
$(this).addClass("lista")
$(this).addClass("listafinal")
});
$("#add").click(function(){
$(".seleccionado").appendTo("#listados")
});
$("#seleccionados ul li").click(function(){
$(this).toggleClass("seleccionado")
});
$("#del").click(function(){
$(".seleccionado").appendTo("#nolistados")
$(this).removeClass("lista")
$(this).addClass("listafinal")
});
});
</script>
<style>
.cuadros{
width: 30%;
float: left;
position: relative;
border:solid 1px red;
}
.seleccionado{
background-color: yellow;
}
</style>
</head>
<body>
<div class="cuadros" id="seleccionable">
<ul id="nolistados" >
<li id="elemento1">elemento1</li>
<li id="elemento1">elemento2</li>
<li id="elemento1">elemento3</li>
<li id="elemento1">elemento4</li>
<li id="elemento1">elemento5</li>
</ul>
</div>
<div class="cuadros">
<button id="add">>></button><br>
<button id="del"><<</button>
</div>
<div class="cuadros" id="seleccionados">
<ul id="listados">
</ul>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario