JQuery UI: cómo aplicar la contención al selector que coincide con varios divs?

Question

Ejemplo:

<div> 
    <div class='drop'> 
     <div class='drag'></div> 
    </div> 
    <div class='drop'> 
    </div> 
    <div class='drop'> 
    </div> 
    <div class='drop'> 
    </div> 
    <div> 
    </div> 
</div> 

$('div.drag').draggable({ containment: 'div.drop' }); 

Normalmente, si sólo hay elemento 1 "div.drop", funciona como se pretende. Si hay más de 1 (como en el ejemplo anterior), pensé que sería arrastrado/soltado en cualquiera de los divs "div.drop". Como resultado, solo se puede arrastrar/soltar al primer elemento que coincida con el selector "div.drop".

¿Hay alguna solución para esto (es decir, hacer que esté contenido/que se pueda soltar/arrastrar solo en los divs "div.drop")?

EDIT: Supongo que tienes razón chicos. Después de una introspección, me di cuenta de que no recurrí a las soluciones sugeridas, ya que hay espacio entre los divs y no quiero que los divs "div.drag" se dejen caer en el área acolchada.

Answer 1

¡No funciona así! La contención es restringir el límite de arrastre.

Quiere arrastrar y soltar.
entonces usted tiene que configurar de arrastre para div.grag:

$('div.drag').draggable(); 

Y configurar caída de div.drop:

$('div.drop').droppable(); 

Puede añadir contención para su elemento de arrastre con su primer nivel div:

<div id='dragZone'> 
    <div class='drop'> 
     <div class='drag'></div> 
    </div> 
    <div class='drop'> 
    </div> 
</div> 


$('div.drag').draggable({ containment: '#dragZone'}); 

Answer 2

containment restringe el movimiento de un arrastrable dentro de los límites del elemento (s) dado. Puede establecer containment al padre de div.drop s.

Usted debe hacer la div.drop s lanzables, anexe el que pueden arrastrarse en la caída, y utilice la opción revert: 'invalid' de manera que los revierte arrastrables si no se deja caer en una lanzables

$('div.drop').droppable({drop: function(e, ui) { 
    ui.draggable.appendTo(this); 
}}); 
$('div.drag').draggable({ 
    helper: 'clone', 
    revert: 'invalid' 
}); 

Answer 3

A medida que los chicos han señalado la contención selector no funciona así, ya que Consiste en arrastrar dentro de los límites del elemento o región especificada.

Se podría intentar algo como a continuación:

JQuery Referencias:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 

HTML:

<div id="dragContainer">  
<div class='drop'> 
    <div class='drag'>drag</div>  
</div>  
<div class='drop'>drop 
</div>  
<div class='drop'>drop 
</div>  
<div class='drop'>drop 
</div>  
<div class='nodrop'> 
</div> 
</div> 

JQuery:

<script type="text/javascript"> 
$('div.drag').draggable({ containment: '#dragContainer', revert: "invalid" }); 

    $('div.drop').droppable({ 
    drop: handleDropEvent 
    }); 

function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
    alert('Ok to drop here onto me!'); 
} 
</script> 

Answer 4

no probar mi código

<style> 
.container { 
    border: 2px solid #000; 
} 
.container img { 
    width: 45px; 
    height: 45px; 
} 
.draggable { 
    width: 40px; 
    height: 40px; 
    background: #F90; 
    border-radius: 10px; 
    margin: 0 0 0 0; 
    float: top; 
} 
.draggable.is-pointer-down { 
    background: #09F; 
    z-index: 2; /* above other draggies */ 
} 
.draggable.is-dragging { opacity: 0.7; } 
</style> 
    <script> 
$(document).ready(function() { 
    var $draggables = $('.draggable').draggabilly({ 
    // contain to parent element 
        **containment: "#box"** 
    }); 
}); 
</script> 

Hola. Creo que esto podría ayudar :)

<div class="container" id="box"> 

y mis imágenes están dentro de este div.