可拖动的安全壳边缘触发事件

Question

jQuery UI可拖放插件允许您为可拖的插件设置包含

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

我的问题是，如何检测div是否已到达其遏制的边缘？

我想模仿视窗的效果，当你拖动一个面板的边缘，它的50%的宽度和100%的高度，但我不知道如何检测/触发事件时，div到达边缘。

谢谢

Answer 1

您可以使用拖动函数在拖放元素被移动时返回它的位置。将其与父级的外部边缘的位置以及两个相交触发调整大小操作的时间进行比较。

这个小提琴是一个非常简单的版本，你正在寻找的东西，但它应该说明基本的概念，并使你开始在正确的方向。希望这能帮上忙。

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%'
            });
        }
    }
}); 

})；