Tengo este código:
var elementos = $("#caja1").children("a.list-group-item");
var elementos2 = $("#caja2").children("a.list-group-item");
function asignarClick(elementos) {
for (var i = 0; i < elementos.length; i++) {
$(elementos[i]).on("click", function() {
if (!$(this).hasClass("active")) {
for (var j = 0; j < elementos.length; j++) {
if ($(elementos[j]).hasClass("active")) {
$(elementos[j]).removeClass("active");
}
}
$(this).addClass("active");
if ($(this).parent().attr("id") == "caja1") {
}
}
});
}
}
$(function() {
asignarClick(elementos);
asignarClick(elementos2);
$("#arrowUp").css("cursor", "pointer");
$("#arrowDown").css("cursor", "pointer");
$("#arrowUp").on("click", function() {
alert("Flecha arriba");
});
$("#arrowDown").on("click", function() {
var elementos = $("#caja1").children("a.list-group-item");
for (var i = 0; i < elementos.length; i++) {
if ($(elementos[i]).hasClass("active")) {
$(elementos[i]).removeClass("active");
$(elementos[i]).remove();
$("#caja1").children().first().addClass("active");
$("#caja2").append(elementos[i]);
elementos = $("#caja1").children("a.list-group-item");
asignarClick(elementos);
elementos2 = $("#caja2").children("a.list-group-item");
asignarClick(elementos2);
}
}
});
});
a.active {
background-color: yellow;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="row" style="margin-bottom: 2em">
<div class="col-md-12">
<div class="list-group" id="caja1">
<a href="#" class="list-group-item list-group-item-danger active">First item</a>
<a href="#" class="list-group-item list-group-item-danger">Second item</a>
<a href="#" class="list-group-item list-group-item-danger">Third item</a>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 3em">
<div class="col-md-12" style="text-align: center">
<div class="col-md-6" style="color: #990000">
<i class="fa fa-2x fa-arrow-up" aria-hidden="true" id="arrowUp"></i>
</div>
<div class="col-md-6" style="color: #990000">
<i class="fa fa-2x fa-arrow-down" aria-hidden="true" id="arrowDown"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group" id="caja2">
<a href="#" class="list-group-item list-group-item-danger active">First item</a>
<a href="#" class="list-group-item list-group-item-danger">Second item</a>
<a href="#" class="list-group-item list-group-item-danger">Third item</a>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
En una caja, si pincho un elemento me lo pone como active y me lo colorea, así mismo me quita el active del elemento que lo estaba. Lo que quiero es que cuando yo haga click en la flecha de bajar me baje el elemento seleccionado en la caja1 a la caja2 y funcione como al principio.
<i class="fa fa-2x fa-arrow-up" aria-hidden="true" id="arrowUp"></i>
esto es una flecha, lo que pasa es que es de una libreria que se llama fontawesome. es que me propusieron una edicion, la acepte y no me di cuenta de que era un snippet xD