Question

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>

How can I make it so that the “div.drag” can only be dragged/dropped inside a “div.drop” element?

Answer 1

You can do something like this in your javascript:

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

Update:

To have the element revert back to its original position if not dropped on a valid element:

$('.drag').draggable({
  snap: '.drop',
  revert: 'invalid'
});