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

如果您手動定義可調整大小的邊界，然後你調用一個鼠標鬆開時，可調整大小已經達到了這些邊界。下面是一起玩小提琴：

Fiddle