0

Estoy usando la función draggable de Jquery UI en varias divs y queria saber cómo puedo hacer para evitar que al mover un div y tratar de soltarlo fuera de su div padre(el div contenedor), en un espacio hotizontal. Es para evitar que este div no pueda estar posicionado en cierto espacio de la web: este es mi codigo:

	$(document).ready(function(){

    $(".caja1").draggable();
	$(".caja1").resizable();
				
    });
      div.container
			 {
      position: relative;
      border:1px solid black;
      padding-left: 10px;
			 }	
div.caja1 {
width: 100px;
			    height: 100px;
			    position: relative;
			  }
			  
			  div.caja1 {
			    background: rgb(83, 53, 117)
			  }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

			<div class="container">
				
				<div class="caja1" contenteditable="true">
			    caja 1
			   </div>

			  <div class="caja1" contenteditable="true">
			    caja 2
			  </div>

			</div> 

Cómo podria lograr esto? Solo quiero saber cómo hacer para que uno o más divs, no traspasen a su div padre, no se salgan de ese div padre.

1 respuesta 1

2

En la documentación de jQuery UI hay un ejemplo de lo que vos buscas hacer, como este hay varios más, es totalmente recomendable pegarles una mirada antes de usar la librería.

Llendo al caso específico, lo que tenes que hacer es darle uso a containment para definir cual será el elemento del dominio que contendrá a tu elemento Draggable

Por ejemplo:

$( function() { 
    //Acá se puede ver, que utilizo ''containment'' para definir que estará siempre dentro de #contenedor
    $( "#solodentro" ).draggable({ containment: "#contenedor"});
    $( "#todo" ).draggable();
  } );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
  <style>  
  #contenedor
  {
    height: 300px;
    width: 300px;
    background-color: blue;    
  }
  
  .ejemplo
  {
    height: 100px;
    width: 100px;
    background-color: red;
    margin: 4px;
  }  
  </style>  
  
  <div id="contenedor">  
    <div class="ejemplo" id="solodentro"> ¡No puedo salir! </div>
    <div class="ejemplo" id="todo"> ¡Yo si puedo! </div>  
  </div> 
  
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

1
  • 1
    Tienes toda la razón man, Muchas Gracias. Me ha servido mucho. He leído la documentación de Jquery UI Draggable y he encontrado varias cosas sobre eso. Gracias Commented el 28 dic. 2018 a las 22:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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