jquery resize div to div

Question

divコンテナに1つまたは複数のドラッグ可能なリサイズがあります。それらは既にドラッグしたときにdivの端にスナップしますが、サイズを変更すると端にスナップする必要もあります。私が見つけた拡張では、彼らは特定の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>

Answer 1

あなたは言った：私は

を発見した拡張子で

が、それはこの1つですか？ polomoshnov/jQuery-UI-Resizable-Snap-extension

、あなたが言ったように：

彼らはだけでなく、特定のdivに、他のサイズ変更可能にスナップします。

あなたがその拡張子をロードするとき、あなたは簡単にこの例のように

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

にスナップしたいのdivを設定することができ、このヘルプを願っています。

Answer 2

リサイズ可能な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); 
     } 
    } 
}); 

この解決策が役立つかどうか教えてください。しかし、イージー方向のサイズを変更したのと同じように、リサイズ関数内に他の方向の独自のロジックを記述したいことがあります。