jQuery ui可调整大小不能将元素扩展到左侧或顶部

Question

我正在尝试向某些元素添加可调整大小的事件，但是当我试图将元素扩展到左侧或顶部时，我注意到了一个奇怪的事情。

我有一个div类.limit这是遏制我可调整大小的元素。

我的可调整大小的元素包裹div.content内

如果您尝试展开向左或顶部的元素，你会发现，它不会让你，但它可以将其扩展到直到你得到遏制右侧和底部（div.limit）

这是我的jsfiddle：http://jsfiddle.net/mody5/s0yo16ek/5/

，这是代码：

HTML：

<div class="limit"> 
    <div class="content"> 
     <h1 class="resizable">Navbar example</h1> 
     <p class="resizable">This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
    </div> 
</div> 

CSS：

.limit{ 
    width: 600px; 
    background: yellow; 
    border: 1px solid gray; 
} 
.content{ 
    width:500px; 
    margin: 18px; 
    padding:10px; 
    background: orange; 
} 
.resizable{ 
    width: 300px; 
    border: 1px solid red; 
} 

JAVASCRIPT：

$(".resizable").resizable({ 
     containment: '.limit', 
     handles: "n, e, s, w"  
}); 

Answer 1

在我看来就像一个错误。查看jQuery的源代码，你可以看到，一旦元素的坐标变为负左侧，它将左侧重置为0，而不考虑偏移量。由于你的元素是相对的，位置是0，但并不意味着如果你愿意，它不能成为负数。 您可以根据需要修改jquery-ui。例如，重写可处理遏制的可调整大小的零件会照顾左侧的问题。现在，也许有另一种方式，这是不是一个真正的妥善的解决办法，但仍：

$.ui.plugin.add("resizable", "containment", { 

    start: function(event, ui) { 
     var that = $(this).data("resizable"), o = that.options, el = that.element; 
     var oc = o.containment, ce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0) : oc; 
     eoffset=that.element.offset()//at start get offset of the element 
     if (!ce) return; 

     that.containerElement = $(ce); 

     if (/document/.test(oc) || oc == document) { 
      that.containerOffset = { left: 0, top: 0 }; 
      that.containerPosition = { left: 0, top: 0 }; 

      that.parentData = { 
       element: $(document), left: 0, top: 0, 
       width: $(document).width(), height: $(document).height() || document.body.parentNode.scrollHeight 
      }; 
     } 


     else { 
      var element = $(ce), p = []; 
      $([ "Top", "Right", "Left", "Bottom" ]).each(function(i, name) { p[i] = num(element.css("padding" + name)); }); 

      that.containerOffset = element.offset(); 
      that.containerPosition = element.position(); 
      that.containerSize = { height: (element.innerHeight() - p[3]), width: (element.innerWidth() - p[1]) }; 

      var co = that.containerOffset, ch = that.containerSize.height, cw = that.containerSize.width, 
         width = ($.ui.hasScroll(ce, "left") ? ce.scrollWidth : cw), height = ($.ui.hasScroll(ce) ? ce.scrollHeight : ch); 

      that.parentData = { 
       element: ce, left: co.left, top: co.top, width: width, height: height 
      }; 
     } 
    }, 

    resize: function(event, ui) { 

     var that = $(this).data("resizable"), o = that.options, 
       ps = that.containerSize, co = that.containerOffset, cs = that.size, cp = that.position, 
       pRatio = that._aspectRatio || event.shiftKey, cop = { top:0, left:0 }, eo = that.element.offset(), ce = that.containerElement;//add eo variable to get offset while resizing 

     if (ce[0] != document && (/static/).test(ce.css('position'))) cop = co; 

     if (cp.left < (that._helper ? co.left : co.left-eoffset.left+that.originalPosition.left)) {//instead of validating if position is lower than 0, checks that offset of left is lower than containment offset 
      console.log('hey') 
      that.size.width = that.size.width + (that._helper ? (that.position.left - co.left) : (that.position.left - cop.left)); 
      if (pRatio) that.size.height = that.size.width/that.aspectRatio; 
      that.position.left = o.helper ? co.left : co.left-eoffset.left+that.originalPosition.left;//if it's lower than containment offset, set it to containment offset minus start position offset plus original position offset. 

     } 

     if (cp.top < (that._helper ? co.top : 0)) { 
      that.size.height = that.size.height + (that._helper ? (that.position.top - co.top) : that.position.top); 
      if (pRatio) that.size.width = that.size.height * that.aspectRatio; 
      that.position.top = that._helper ? co.top : 0; 
     } 

     that.offset.left = 50; 
     that.offset.top = that.parentData.top+that.position.top; 

     var woset = Math.abs((that._helper ? that.offset.left - cop.left : (that.offset.left - cop.left)) + that.sizeDiff.width), 
        hoset = Math.abs((that._helper ? that.offset.top - cop.top : (that.offset.top - co.top)) + that.sizeDiff.height); 

     var isParent = that.containerElement.get(0) == that.element.parent().get(0), 
      isOffsetRelative = /relative|absolute/.test(that.containerElement.css('position')); 

     if(isParent && isOffsetRelative) woset -= that.parentData.left; 

     if (woset + that.size.width >= that.parentData.width) { 
      that.size.width = that.parentData.width - woset; 
      if (pRatio) that.size.height = that.size.width/that.aspectRatio; 
     } 

     if (hoset + that.size.height >= that.parentData.height) { 
      that.size.height = that.parentData.height - hoset; 
      if (pRatio) that.size.width = that.size.height * that.aspectRatio; 
     } 
    }, 

    stop: function(event, ui){ 

     var that = $(this).data("resizable"), o = that.options, cp = that.position, 
       co = that.containerOffset, cop = that.containerPosition, ce = that.containerElement; 

     var helper = $(that.helper), ho = helper.offset(), w = helper.outerWidth() - that.sizeDiff.width, h = helper.outerHeight() - that.sizeDiff.height; 

     if (that._helper && !o.animate && (/relative/).test(ce.css('position'))) 
      $(this).css({ left: ho.left - cop.left - co.left, width: w, height: h }); 

     if (that._helper && !o.animate && (/static/).test(ce.css('position'))) 
      $(this).css({ left: ho.left - cop.left - co.left, width: w, height: h }); 

    } 
}); 

非常沉重的jsfiddle：http://jsfiddle.net/hmm3p1be/1/