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

回答

相关问题