0

这项工作是对我之前未回答的问题的回应：Resizable div doesn't stay within containment parameter

由于我的resizablediv （称为pocket）不是我希望将其包含在其中的容器的直接子级，因此我在应将resize其包含在容器中的方法中提供了一个回调。

在这里小提琴：http: //jsfiddle.net/dKuER/12/

我的问题

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

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

如何确保始终遵守回调函数的逻辑？

// 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;
}
4

1 回答 1

0

使用鼠标坐标，以及通过resizablediv 的对象方法获得的宽度（如此明显！），而不是从一些晦涩的计算中推导出来，我能够达到正确的效果

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-09T03:32:55.077 回答