You need to check if the drop is inside the dimension of the dropzone div.
function init() {
$('.draggable').draggable({
opacity:0.7, helper:"clone",
stop: function(event, ui) {
var coords = $('#resultArea').position();
coords.bottom = coords.top + $('#resultArea').height();
coords.bottomRight = coords.left + $('#resultArea').width();
if(ui.position.top >= coords.top && ui.position.top <= coords.bottom && ui.position.left >= coords.left && ui.position.left <= coords.bottomRight){
console.info("inside");
}else{
console.info("outside");
}
}
});
}
Live Demo
Update:
Place the calculations in a separate function to make it reusable
function inDropZone(drag, drop){
var coords = drop.position();
coords.bottom = coords.top + drop.height();
coords.bottomRight = coords.left + drop.width();
if(drag.position.top >= coords.top && drag.position.top <= coords.bottom && drag.position.left >= coords.left && drag.position.left <= coords.bottomRight){
return true;
}else{
return false;
}
}