Na div-alunos tenho uma lista, e ao clicar em cima de cada aluno gostaria de preencher uma outra div-grupo que vou colocar dentro de um form para cadastrar um grupo de alunos, ou seja, o usuário vai selecionando os alunos que deseja e a cada click esse aluno é enviado para outra div. Parecido com um sistema de compras que vc insere itens no carrinho usando Jquery
Meu código HTML e JQUERY:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="style.css">
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
<body>
<div class="lista-alunos">
<h3></i>Alunos</h3>
<ol id="selectable">
<li class="ui-widget-content">Aluno 1</li>
<li class="ui-widget-content">Aluno 2</li>
<li class="ui-widget-content">Aluno 3</li>
<li class="ui-widget-content">Aluno 4</li>
<li class="ui-widget-content">Aluno 5</li>
<li class="ui-widget-content">Aluno 6</li>
<li class="ui-widget-content">Aluno 7</li>
<li class="ui-widget-content">Aluno 8</li>
<li class="ui-widget-content">Aluno 9</li>
<li class="ui-widget-content">Aluno 10</li>
<li class="ui-widget-content">Aluno 11</li>
<li class="ui-widget-content">Aluno 12</li>
<li class="ui-widget-content">Aluno 13</li>
<li class="ui-widget-content">Aluno 14</li>
</ol>
</div>
<div class="lista-grupo">
<h3>Grupo</h3>
</div>
</body>
CSS:
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #F39814;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
/* SCROLL */
height: 290px;
overflow: auto;
}
#selectable li {
background-color: #ECECEC;
border: 1px solid #ccc;
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
cursor: pointer;
}
.lista-alunos, .lista-grupo{
position: relative;
float: left;
display: block;
width: 300px;
height: 350px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
}
.lista-grupo{
margin-left: 15px;
}