jquery 可调整大小的 snap to div

Question

我在 div 容器中有一个或多个可拖动的可调整大小的元素。当我拖动它们时，它们已经吸附到 div 的边缘，但是当我调整它们的大小时，我还需要它们吸附到边缘。在我发现的一个扩展中，它们只捕捉到其他可调整大小的元素，而不是特定的 div。这个问题有扩展吗？

另一个问题是，当我将 aspectRatio: true 添加到我的可调整大小时，当它被拖到 div 的边缘时，我无法再调整它的大小，当它对齐时...更新:您现在可以对其进行测试并在代码段中查看。所以我想解决这个问题并向其添加可调整大小的快照。

一些代码:

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

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

.resizable {
	position: absolute;
    width: 100px; height: 100px;
    border: 1px solid black;
    z-index: 1;
}
#pagecontainer {
	position: relative;
	border: 2px solid #ccc;
	padding: 0px;
	float: left;
	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

你说:

In an extension I found

是这个吗？ polomoshnov/jQuery-UI-Resizable-Snap-extension

正如你所说:

They only snap to other resizable, not to a certain div.

当你加载那个扩展时，你可以像这个例子一样轻松地设置你想要捕捉的 div

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

希望这对您有所帮助。