可调整大小容器中可拖放元素的包容问题
可调整大小容器中可拖放元素的包容问题
提问于 2013-12-17 13:48:29
我认为这很简单，但是在jQuery UI中放置可拖放的元素时，会出现一些but。
下面的代码允许将可拖动的元素稍微放置在容器之外，因为调整大小句柄(小提琴手)创建了额外的高度。
HTML
<div class="container2">
<div class="item2"></div>
</div>CSS
.container2 {
min-width:300px;
min-height:200px;
outline:1px solid black;
}
.item2 {
width:50px;
height:50px;
background-color:red;
}jQuery
$(".container2").resizable();
$(".item2").draggable({
containment: ".container2"
}).resizable({
containment: ".container2"
});因此，我使用以下代码将容器的坐标设置为容器的坐标，从而解决了这一问题。
$(".item2").draggable({
start: function (event, ui) {
var containmentX1 = $(".container2").offset().left;
var containmentY1 = $(".container2").offset().top;
var containmentX2 = ($(".container2").outerWidth() + $(".container2").offset().left - $(this).outerWidth())
var containmentY2 = ($(".container2").outerHeight() + $(".container2").offset().top - $(this).outerHeight())
$(this).draggable({
containment: [containmentX1, containmentY1, containmentX2, containmentY2]
});
},
}).resizable({
containment: ".container2"
});除了一个问题..。只有在第二次移动可拖动元素时才设置包含坐标。
我使用create而不是开始处理这个问题，但是如果容器的大小调整了，坐标就不会改变。
是否有办法在第一次拖动时将坐标识别为安全区。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-12-17 14:28:04
您可以将您的容器重新计算包装成一个单独的函数，并在初始化可拖式(在create上)和每次容器调整大小(om stop)之后调用它。
$(".container2").resizable({
stop: reCalcBounds
});
$(".item2").draggable({
create: reCalcBounds
}).resizable({
containment: ".container2"
});
function reCalcBounds(){
var $item = $(".item2");
$container = $(".container2");
var containmentX1 = $container.offset().left;
var containmentY1 = $container.offset().top;
var containmentX2 = ($container.outerWidth() + $container.offset().left - $item.outerWidth())
var containmentY2 = ($container.outerHeight() + $container.offset().top -$item.outerHeight())
$item.draggable("option", "containment", [containmentX1, containmentY1, containmentX2, containmentY2]);
}见更新的小提琴
我认为您还需要根据拖放项的位置来更改可调整大小的容器的minWidth和minHeight，为此可以使用可拖的“停止”回调。
Stack Overflow用户
发布于 2013-12-17 14:23:18
如果遵循您的方法，则可以在调整“.container2”大小和初始化look 那里时设置容器。
另一种解决方案可能只是使用css：
.container2 .ui-resizable-s
{
bottom:0;
}
.container2 .ui-resizable-e
{
right:0;
}您可以验证那里，希望这有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20635918
复制相关文章
相似问题
腾讯云开发者
