jquery resizable snap to div

我在div容器中有一個或多個可拖動的可調整大小。當我拖動它們時，它們已經捕捉到了div的邊緣，但是當我調整它們的大小時，我也需要它們捕捉邊緣。在我發現的一個擴展中，他們只能捕捉到其他可調整大小，而不是特定的div。這個問題有沒有擴展？jquery resizable snap to div

的另一個問題是，當我加入aspectRatio: true我可調整大小的，我無法改變它了，當它拖向div，當它啪的邊緣... 更新：你現在可以測試一下，看看在片段。所以我想解決這個問題，並添加可調整大小的管理單元。

一些代碼片段：

$(".resizable").resizable({ 
 
\t containment: "#pagecontainer", 
 
    aspectRatio: true, 
 
\t /*snap: "#pagecontainer", this doesn't work */ 
 
\t handles: 'n, s, e, w, nw, ne, se, sw' 
 
}); 
 

 
$(".draggable").draggable({ 
 
\t containment: "#pagecontainer", 
 
\t snap: "#pagecontainer", 
 
\t scroll: false 
 
});

.resizable { 
 
\t position: absolute; 
 
    width: 100px; height: 100px; 
 
    border: 1px solid black; 
 
    z-index: 1; 
 
} 
 
#pagecontainer { 
 
\t position: relative; 
 
\t border: 2px solid #ccc; 
 
\t padding: 0px; 
 
\t float: left; 
 
\t background-color: White; 
 
    width: 500px; 
 
    height: 300px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<div id="pagecontainer"> 
 
    <div id="photoframe1" class="draggable resizable droppable frame ui-widget-content ui-state-active"> 
 
    <p></p> 
 
    </div> 
 
</div>

來源

2016-09-28 Eye webdesign

如果您不提供至少一些最低限度的代碼示例，我認爲我們不能幫助您。 JsFiddle或類似的東西當然是理想的 – JHolub

你說：

在擴展中，我發現

它是這一個？ polomoshnov/jQuery-UI-Resizable-Snap-extension

和你說：

他們只捕捉到其他可調整大小，而不是一個特定的DIV。

當裝載擴展您可以輕鬆地設置要捕捉到div像這樣的例子

$('.resize).resizable({ 
    snap: '#cenrtainDiv' 
});

希望這有助於。

來源

2017-02-08 13:59:06 cool

如果您想要根據調整大小方向將可調整大小的div對齊到容器，那麼您可能需要將代碼寫入可調整大小小部件的resize屬性中，如下所示。

$(".resizable").resizable({ 
    containment: "#pagecontainer", 
    handles: 'n, s, e, w, nw, ne, se, sw', 
    resize: function(e, ui) { 
     //Based on the direction get the current position of the ui object while resizing 
     var curPos = ui.position.left + ui.size.width; //This is for east handle 

     //As given in the css for #pageContainer 
     var containerWidth = 500; 

     //distance between the current position and the container width for snapping 
     var dist = containerWidth - curPos; 

     //Snap tolerance is 20px. It can be changed to any number for snapping to happen   
     if(dist > -20 && dist < 20) { 
     $('.resizable').css('width', ui.size.width + dist); 
     } 
    } 
});

讓我知道這個解決方案是否適合你。雖然，您可能想要在調整大小函數內爲其他方向編寫自己的邏輯，就像我剛纔在東向調整大小時所做的一樣。

來源

2017-04-17 16:46:07 TheGaME

jquery resizable snap to div

回答

相關問題