0

tengo una inquietud, desearía hacer lo siguiente, cambiar de posición los DIV con solo arrastrar y soltar encima del DIV que deseamos intercambiar la posición.

Saludos Chicos.

.caja{
  color: #fff;
  display: flex;
  justify-content: center;
}
.caja:nth-child(even){
  background: purple;
}
.caja:nth-child(odd){
  background: goldenrod;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

  <div class="container">
    <div class="row">
      <div class="col-md-2 caja">1</div>
      <div class="col-md-2 caja">2</div>
      <div class="col-md-2 caja">3</div>
      <div class="col-md-2 caja">4</div>
      <div class="col-md-2 caja">5</div>
      <div class="col-md-2 caja">6</div>
    </div>
  </div>
  
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

0

1 respuesta 1

4

Ya que estás utilizando JQuery y estilos de Bootstrap, supongo que no te importará añadir JQueryUI.

A mi parecer añade lo que requieres: la función sortable, que incluye la funcionalidad de reordenar y mantener la posición de los contenedores dentro de un objeto <div>.

Además del código, te dejo aquí también el ejemplo oficial.

Por cierto, he tenido que cambiar la versión slim de la librería JQuery por su versión completa, ya que la primera no tiene sortable.

.caja{
  color: #fff;
  display: flex;
  justify-content: center;
}
.caja:nth-child(even){
  background: purple;
}
.caja:nth-child(odd){
  background: goldenrod;
}
<head>

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  <script>
$(document).ready(function(){
  $(".row").sortable();
});
</script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-2 caja">1</div>
      <div class="col-md-2 caja">2</div>
      <div class="col-md-2 caja">3</div>
      <div class="col-md-2 caja">4</div>
      <div class="col-md-2 caja">5</div>
      <div class="col-md-2 caja">6</div>
    </div>
  </div>
 </body>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.