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

你说：

在我找到的扩展程序中

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

正如你所说：

他们只与其他可调整大小的对象，而不是某个div。

当您加载该扩展程序时，您可以轻松设置要捕捉的div

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

希望这有帮助。

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);
      } 
    }
});

如果此解决方案适合您，请告诉我。虽然，你可能想要为调整大小函数内的其他方向编写自己的逻辑，就像我刚刚调整东方方向一样。

jquery resizable snap to div

2 个答案: