约束在一个可调整大小的DIV

这项工作的位置是在回应我以前未回答的问题：Resizable div doesn't stay within containment parameter 约束在一个可调整大小的DIV

因为我resizable格，这是被称为口袋，是不是该直接子容器，我希望它包含在，我提供了一个回调在resize方法应该包含它的容器内。

我的问题

当你重新大小的resizable格到左边（这将影响其left位置）过去网格边界，它不总是尊重我在回调函数中的逻辑。当您向左拖动时，您会注意到闪烁的动作，其中div将在硬编码的left位置与由鼠标确定的left位置之间切换。

根据您何时停止拖动，div的left位置可能位于硬编码位置或鼠标停止拖动的位置。

如何确保回调函数的逻辑始终受到尊重？

// Relevant Code 

// No blinking action when dealing with the width 
//Re-sizing to the right works 
if ((pocketLeft + currentWidth) > (gridLeft + gridWidth)) { 
    var deltaWidth = (gridLeft + gridWidth) - (pocketLeft + originalWidth); 
    ui.size.width = originalWidth -deltaWidth; 
} 

// This should force the position if the div is re-sized 
// past the grid's left boundary 
if (pocketLeft < gridLeft) { 
    ui.position.left = -120; 
}

来源

2012-08-08 Josh

对不起，我现在很急，但如果你只是想在'＃grid'下设置'resizable' div的大小，你可以使用'max-height' /'max-width'来代替我：http ：//jsfiddle.net/dKuER/14/ – Asif 2012-08-08 21:54:49

@Asif，谢谢你的回复。任何红色方框最终都可能是一个可调整大小的元素，所以我不能在div上应用最大值。 – Josh 2012-08-08 21:57:49

使用鼠标坐标，并通过resizable div的对象的方法达到（这么明显！）的宽度，而不是从一些不起眼的计算得出的，我是能够实现正确的效果

http://jsfiddle.net/dKuER/16/

var x = event.pageX - $('#grid').offset().left; 
var y = event.pageY - $('#grid').offset().top; 

if (x < 0) 
{ 
    ui.size.width = $(this).width(); 
    ui.position.left = $(this).position().left; 
}

我实现这个解决方案试图了解jquery.ui.resizable代码的核心部分。但是，我认为有比我更可接受的答案。

来源

2012-08-09 03:32:55 Josh

约束在一个可调整大小的DIV

回答

相关问题