DRAG POSITION

by bizamajig

HTML

<div id="draggable">
    <img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png">
</div>
<div class="box"></div>

CSS

#draggable {
     width: 50px;
     height: 50px;
 }
 .box {
     height:100px;
     width:100px;
     border:1px solid red;
     z-index:-1;
    margin: auto
 }
 img {
     height:50px;
     width:50px;
 }
 .red {
     background:red;
 }

JavaScript

$("#draggable").draggable({
    helper: "original",
    revert: "invalid",
    drag: function () {
        
    var dtop = $("#draggable").offset().top;
        dleft = $("#draggable").offset().left;
        dbottom = $("#draggable").offset().top + $("#draggable").height();
        dright = $("#draggable").offset().left + $("#draggable").width();

        btop = $(".box").offset().top;
        bleft = $(".box").offset().left;
        bbottom = $(".box").offset().top + $(".box").height();
        bright = $(".box").offset().left + $(".box").width();

        if (dtop > btop && dleft > bleft && dright < bright && dbottom < bbottom) {
            $("#draggable").html('<img src="http://gillespaquette.ca/images/stack-icon.png">');
        } else {
            $("#draggable").html('<img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png">');
        }
    }
});

$('.box').droppable({
    accept: "#draggable",
drop: function( event, ui ) {
    $("#draggable").html('<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png">');}
});