trigger event when draggable hit edge of containment

Question

jQuery UI draggable plugin allow you to set contain for draggable like

$('.panel').draggable({
  handle: ".head",
  containment: "parent",
  cursor: "pointer"
  }
);

My question is how can I detect if div have reached the edge of its containment?

I want to mimic the Windows effect when you drag a panel to edge it go 50% width and 100% height but I don't know how to detect/trigger an event when div reaches the edge.

Thanks

Answer 1

You can use the drag function to return the position of the draggable element while it's being moved. Compare that against the position of the outer edge of the parent and when the two intersect trigger the resizing action.

This fiddle is a very simplified version of what you're looking for, but it should illustrate the basic concept and get you started in the right direction. Hopefully this helps.

http://jsfiddle.net/98jpC/1/

$(function(){
var draggableRight;
var draggableWidth = $('.draggable').width();
var parentWidth = $('#parent').width();
$('.draggable').draggable({
    containment: 'parent',
    drag: function(e, ui){
        draggableRight = ui.position.left + draggableWidth;
        if(draggableRight == parentWidth){
            $(document).trigger("mouseup");
            $('.draggable').css({
                width: '50%',
                height: '100%',
                top: 0,
                left: '50%'
            });
        }
    }
}); 

});