DRAGGABLE - AVOID OTHER DRAGGABLES

by bizamajig

HTML

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

CSS

.drop { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; }

.drag { display:inline-block; width:30px; height:30px; border:1px solid silver; background-color:white; }

JavaScript

$('.drop').droppable({
    tolerance: 'fit',
//	optional method call, drop:
    drop: function(event,ui){
        ui.draggable.offset(ui.position);
    }
});

$('.drag').draggable({
    revert: 'invalid',
    helper: 'clone',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

$('.drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});