Overlap div on drag

Overlap div on drag

by Shree Khanal

HTML

<script src="http://eruciform.com/static//jquidragcollide/jquery-collision.js"></script>
<script src="http://eruciform.com/static//jquidragcollide/jquery-ui-draggable-collision.js"></script>
<div id="moveInHere">
  <div class="draggable butNotHere">Drag me...</div>
  <div class="draggable butNotHere">Drag me...</div>
</div>

CSS

#moveInHere {
    with: 500px;
    height: 500px;
    border: 1px solid black;
    background: #eee;
}
.draggable{
    float: right; 
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background: #aaa;
}

JavaScript

$(".draggable").draggable({
    obstacle:".butNotHere",
    preventCollision: true,
    containment: "#moveInHere",
    start: function(event,ui) {
        $(this).removeClass('butNotHere');
    },
    stop: function(event,ui) {
        $(this).addClass('butNotHere');
    }
});