当可拖动的遏制击中边缘时触发事件

Question

jQuery UI Draggable插件允许您将包含设置为可拖动

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

我的问题是如何检测div是否已达到其限制范围？

当您将面板拖动到边缘时，我想模仿Windows效果，使其宽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%'
            });
        }
    }
}); 

}）;