Question

jQuery UI draggable插件允许您为可拖动的

设置包含

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

我的问题是如何检测div是否已达到其收容的边缘？

当我将面板拖动到边缘时，我想模仿Windows效果它的宽度为50％，高度为100％，但我不知道在div到达边缘时如何检测/触发事件。< / p>

由于

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

}）;

在可遏制的遏制边缘时触发事件

1 个答案: