動態設置mootools makeResizable的限制？

我試圖設置一個可調整大小的圖像的上限值，以保持它在包含div。我使用的mootools，使圖像的雙方移動和resizable（實施Drag.Move和makeResizable這樣做。）動態設置mootools makeResizable的限制？

我的臨時解決方案是使用overflow:hidden;所以調整後的圖像不超越頁面的其餘部分時，它的大小超過容器，但我希望能夠有一種方式，使圖像無法在其容器外調整大小。

我知道，因爲limit設置上'domready'，如果我嘗試將其設置爲調整圖像的大小，改變值的變量（即：onDrag），極限參數不會在飛行中進行更新。我想知道是否有人對我如何能夠達到與Drag.Movecontainer參數類似的效果有任何瞭解，因爲makeResizable似乎沒有相同的參數。

HTML：

<div id="pImageArea"> 
    <div id="pLogo" class="displayNone"> 
     <div id="moveHandleName"> 
      <img src="uploadedlogo.jpg" id="imgName" /> 
     </div> 
     <div id="resizeHandleName"></div> 
    </div> 
</div>

CSS：

#imageArea { 
    float: left; 
    width: 630px; 
    height: 400px; 
    border: 1px solid #333; 
    position: relative; 
    overflow: hidden; 
} 
#imgContainer { 
    width: 50px; 
    height: 50px; 
    border: 1px dashed #333; 
    position: absolute; 
} 
#imgName { 
    width: 100%; 
} 
#moveHandleName { 
    width: 100%; 
    height: 100%; 
} 
#resizeHandleName { 
    width: 8px; 
    height: 8px; 
    border: 1px solid #000; 
    position: absolute; 
    left: 100%; 
    top: 100%; 
    margin: -5px 0 0 -5px; 
    background-color: #fff; 
    z-index: 100; 
}

JS：提前

window.addEvent('domready', function(){ 
    var xLim = 50; 
    var yLim = 50; 
    // Make image moveable 
    new Drag.Move($('imgContainer'), { 
     container: $('imageArea'), 
     handle: $('imgHandleName') 
    }); 
    // Make image resizable 
    $('imgContainer').makeResizable({ 
     handle:$('handleName'), 
     limit: {x: [50, xLim], y: [50, yLim]}, 
     onDrag: function(el) { 
      // Set imgContainer height 
      el.setStyle('height', $('imgName').getSize().y + 'px'); 
      // Set upper limits 
      xLim = $('imageArea').getSize().x - el.getSize().x; 
      yLim = $('imageArea').getSize().y - el.getSize().y; 
     }, 
    }); 
});

感謝，

馬特

來源

2011-05-18 pitadtd

在我自己的代碼我「解決」像這樣（修改爲使用你的元素和值）：一旦您指定的「容器」選項

$('imgContainer').retrieve('resizer').setOptions({ 
    limit: { 
     x: [50, xLim], 
     y: [50, yLim] 
    } 
});

來源

2011-05-20 20:12:38 LHMathies

謝謝，LH。無論出於何種原因，我都無法複製這種方法的成功，但是這些要求已經發生了變化（我知道是令人震驚的），因爲這種功能不再需要。 – pitadtd 2011-06-03 21:30:16

這就是發生了什麼事。但是我沒有注意到我的答案是，你的邏輯是錯誤的。您需要在移動時調整限制，調整大小時重新計算移動限制，反之亦然。 – LHMathies 2011-06-04 10:53:58

此舉限制應適當執行，你的容器具有設置寬度和高度。當您調整大小時，我的可拖動不需要設置限制（重新設置）。（順便使用Moo 1.4。）
但是，調整大小確實會導致與移動和限制相關的問題。關鍵是隻有在初始化makeResizable（）時才設置'limit'選項。更新它的唯一方法是使用上面顯示的代碼進行設置。但是你必須更新，因爲這是可拖動的，因爲這是影響限制的唯一事件。所以：

// Make image moveable 
new Drag.Move($('imgContainer'), { 
    container: $('imageArea'), 
    handle: $('imgHandleName'), 
    onDrop: function() { 
     $('imgContainer').retrieve('resizer').setOptions({ 
     limit: { 
      x: [50, $('imageArea').getSize().x - parseInt($('imageArea]).getStyle('left'))], 
      y: [50, $('imageArea').getSize().y - parseInt($('imageArea]).getStyle('top'))] 
     } 
     }); 
    });

正如你所看到的，我也用getStyle（）的，而不是爲getPosition（）因爲爲getPosition（）返回相對於窗口的值，而武設置可拖動的頂部和相對左側的droparea。

來源

2011-10-20 14:39:00 kasimir

動態設置mootools makeResizable的限制？

回答

相關問題