當可拖動的遏制擊中邊緣時觸發事件

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

}）;