Jquery UI 드래그 가능 + 크기 조정 가능한 봉쇄 문제

Question

현재 구성 요소의 크기와 드래그에 봉쇄를 적용하려고합니다. 드래그는 봉쇄 경계를 완벽하게 수용하지만 크기 조정은 나가고 지정한 경계를 따르지 않기로 결정합니다. 여기서 내가 잘못하고있는 것은 무엇입니까?

다음 jsFiddle (http://jsfiddle.net/cyVYq/30/)을 참조하십시오.

$(".Event3").draggable({ 
    axis: "x", 
    containment: "#2" 
}).resizable({ 
    axis: "x", 
    handles: "e, w", 
    containment: "#2" 
}) 

많은 감사,

Answer 1

당신은 부모가 아닌 요소의 크기 조정을 포함하려는은 (#2)

는 부모 .TimelineContainer에 컨테이너를 설정하십시오 :

$(".Event3").resizable({ 
    axis: "x", 
    handles: "e, w", 
    containment: ".TimelineContainer" 
}) 

Fiddle

업데이트 :

JQuery-UI 문서에서 포함 옵션의 의도 된 사용이 상위 요소의 범위 내에서 사용되는 것으로 보입니다. 이 옵션을 의도 한대로 사용할 수없는 것 같습니다. 같은 시도 : 수동으로 크기 조정의 경계를 정의

$(".Event3").resizable({ 
    axis: "x", 
    handles: "e, w", 
    containment: ".TimelineContainer", 
    resize: function(event, ui) { 
     // Define the dimensions of this element 
     var left = ui.position.left; 
     var width = ui.size.width; 
     var right = left + width; 
     // Define my constraints based on the element #2 
     var constraintLeft = $('#2').position().left; 
     var constraintWidth = $('#2').width(); 
     var constraintRight = constraintLeft + constraintWidth; 
     // if resizable has gone further left than the constraint 
     if(left < constraintLeft) { 
      var left = parseInt($(this).css('left')); 
      // measure the difference between this left and the constraint left 
      var difference = constraintLeft - left; 
      // make up the difference 
      $(this).css('left', constraintLeft);  
      // make sure your width stays the same 
      $(this).width($(this).width() - difference); 
      // cancel the event 
      $(this).resizable('widget').trigger('mouseup'); 
     } 
     // if resizable has gone further right than the constraint 
     if(right > constraintRight) { 
      // change the width to fit between the constraint right and this left 
      $(this).width(constraintRight - left); 
      // cancel the event 
      $(this).resizable('widget').trigger('mouseup'); 
     } 
    } 
}); 

을하고, 크기 조정이 그 경계에 도달했을 때 당신은 mouseup에 문의하십시오. 여기에 놀러 바이올린는 다음과 같습니다

실제로 사업부 # 2에 드래그를 제한 할

Fiddle