0

この取り組みは、私の以前に回答されていない質問への回答です:サイズ変更可能な div は、格納パラメーター内にとどまりません

pocketresizableと呼ばれる私のdiv は、それを入れたいコンテナの直接の子ではないため、コンテナ内に含める必要があるメソッドでコールバックを提供しました。resize

ここでフィドル：http://jsfiddle.net/dKuER/12/

私の問題

resizabledivのサイズをグリッド境界を超えleftて左に変更すると (位置に影響します) 、コールバック関数のロジックが常に尊重されるとは限りません。左にドラッグすると、div がハードコードされた位置からマウスで決定された位置に切り替わる点滅アクションに気付くでしょう。leftleft

いつドラッグを中止leftするかによって、div の位置は、ハードコーディングされた位置か、マウスがドラッグを停止した場所のいずれかになります。

コールバック関数のロジックが常に尊重されるようにするにはどうすればよいですか?

// 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

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-09T03:32:55.077 に答える