Quiero que al hacer click
los elementos de #categoria
no se remuevan y se agreguen en #campoBusq
. Además que no inserte 2 veces div
que ya se insertó.
jQuery(document).ready(function() {
jQuery('#categoria').on('click','.elemento',function() {
jQuery(this).appendTo('#campoBusq');
});
jQuery('#campoBusq').on('click','.elemento',function() {
jQuery(this).appendTo('#categoria');
});
});
#campoBusq {
border: 1px solid blue ;
width:45%;
float:left;
padding:5px;
height:200px;
}
#categoria {
border: 1px solid red;
width:45%;
padding:5px;
float:left;
height:200px;
}
.elemento {
border: 1px solid green;
width:90%;
margin:1%;
padding:1%;
float:left;
clear:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="campoBusq"></div>
<div id="categoria">
<div class="elemento">Chile</div>
<div class="elemento">México</div>
<div class="elemento">Perú</div>
<div class="elemento">España</div>
<div class="elemento">Argentina</div>
</div>
Como mantener el div de #categoria
y con sólo eso es difícil para nosotros entender lo que quieres.