jquery - 컨테이너에 도달 할 때 요소 ondrag 크기 조정

Question

표준 div를 모두 부모로 드래그하여 & 크기로 드래그하도록 설정했습니다. 내가 그것의 부모로 드래그로 div 크기를 조정할 수 있어야합니다. 난 단지가 바닥에 수직으로 끌어 때 일이 필요합니다, 그래서 같이 그것을 설정을 가지고 :

$("#draggable").draggable({ 
    drag: function(event, ui) { AtBottom(); }, 
    axis:'y', containment:'parent' 
}); 

다음

내가 드래그 요소 모두의 바닥 위치를 계산하고 그것을 컨테이너 (차감)하고, 그것은 크기 조정 재 그것은 전체 드래그를 통해 그 JQuery와 저장 요소의 속성을 표시하고이를 다시 계산하지 않고, 성능을 위해 의미가있는, 그러나 이것을 허용하지 않습니다

function AtBottom(){ 

    var Cpos = $('#Container').position(); 
    var cheight = $('#Container').height(); 
    var Boundry = Cpos.top+cheight; 

    var pos = $("#draggable").position(); 
    var height = $("#draggable").height(); 
    var bottom = pos.top+height+10; /*10 as offset */ 

    if(bottom>Boundry){ 

     $("#draggable").height((height-10)); 

    } 

} 

.. 큰 때 내가 원하는 방식대로 일하십시오 - 그렇지 않으면 꼭해야합니다. 드래그 할 때마다 높이가 10만큼 줄어 듭니다.

Jquery에서 위치를 다시 계산할 수있는 방법이 있습니까? -> 이미 활성화/비활성화를 시도했습니다.

Answer 1

나는 당신이하고있는 것처럼 들리 겠지만, 컨테이너보다 더 큰 드래그 가능한 영역을 기반으로하는 제약 조건을 생성해야했습니다 (드래그 가능한지도처럼).). jquery-ui.js를 편집하여 포함과 유사하지만 제약 조건을 호출했습니다. 코드에서

세트를 당신이 봉쇄 것 같은 :

$("#draggable").draggable({ 
    axis: 'y', 
    constraint: 'parent' 
}); 

라인 731 :

constraint: false, 

라인 849 :

//Set a constraint if given in the options 
if(o.constraint) 
    this._setConstraint(); 

라인 1071 :

_setConstraint: function() { 

    var o = this.options; 
    if(o.constraint == 'parent') o.constraint = this.helper[0].parentNode; 
    if(o.constraint == 'document' || o.constraint == 'window') this.constraint = [ 
     0 - this.offset.relative.left - this.offset.parent.left, 
     0 - this.offset.relative.top - this.offset.parent.top, 
     $(o.constraint == 'document' ? document : window).width() - this.helperProportions.width - this.margins.left, 
     ($(o.constraint == 'document' ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top 
    ]; 

    if(!(/^(document|window|parent)$/).test(o.constraint) && o.constraint.constructor != Array) { 
     var ce = $(o.constraint)[0]; if(!ce) return; 
     var co = $(o.constraint).offset(); 
     var over = ($(ce).css("overflow") != 'hidden'); 

     this.constraint = [ 
     co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left, 
     co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top, 
     co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left, 
     co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top 
     ]; 
    } else if(o.constraint.constructor == Array) { 
     this.constraint = o.constraint; 
    } 

    }, 

,

줄 1142, _generatePosition 함수 :

if(this.constraint) { 
    if(event.pageX - this.offset.click.left > this.constraint[0]) pageX = this.constraint[0] + this.offset.click.left; 
    if(event.pageY - this.offset.click.top > this.constraint[1]) pageY = this.constraint[1] + this.offset.click.top; 
    if(event.pageX - this.offset.click.left < this.constraint[2]) pageX = this.constraint[2] + this.offset.click.left; 
    if(event.pageY - this.offset.click.top < this.constraint[3]) pageY = this.constraint[3] + this.offset.click.top; 
    }