Example:

<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' });

Normally, if there is only 1 "div.drop" element, it works as intended. If there are more than 1(like in the example above), I thought that it would be dragged/dropped in any of the "div.drop" divs. As it turns out, it is only draggable/droppable to the first element matched by the "div.drop" selector.

Is there a workaround for this(that is, make it contained/droppable/draggable only in the "div.drop" divs)?

EDIT: I guess you are right guys. After some introspection, I realized that I didn't go for your suggested solutions since there are padding between the divs and I don't want the the "div.drag" divs to be dropped on the padded area.

Example:

<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' });

Normally, if there is only 1 "div.drop" element, it works as intended. If there are more than 1(like in the example above), I thought that it would be dragged/dropped in any of the "div.drop" divs. As it turns out, it is only draggable/droppable to the first element matched by the "div.drop" selector.

Is there a workaround for this(that is, make it contained/droppable/draggable only in the "div.drop" divs)?

EDIT: I guess you are right guys. After some introspection, I realized that I didn't go for your suggested solutions since there are padding between the divs and I don't want the the "div.drag" divs to be dropped on the padded area.

• javascript
• jquery
• jquery-ui

4 Answers 4

It don't works like that !! The containment is to constraint bound of dragging.

You want drag and drop.
Then you have to configure drag for div.grag:

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

And configure drop for div.drop:

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

You can add containment for your drag element with your first div level:

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


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

containment restricts the movement of a draggable within the bounds of the given element(s). You could set containment to the parent of the div.drops.

You should make the div.drops droppable, append the draggable on drop, and use the revert: 'invalid' option so that the draggable reverts if it's not dropped on a droppable

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

As the guys have pointed out the containment selector does not work like that as it Constrains dragging to within the bounds of the specified element or region.

You could try something like below:

JQuery References:

<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis./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> 

Do try my code

<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>

Hello. I think this might help you :)

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

and my images are inside this div.