1

2 つの div の間にスプリッターがあり、スプリッターを移動して 2 つのコンテナーのサイズを変更できます。私がしたいのは、スプリッターの位置、2 つのコンテナーの幅をキャッシュに保存し、ブラウザーの更新時にそれらの幅と位置を保持できるようにすることです。これがコードのスニペットです。

var separatorPos = $('.content-columns-sep').position().left;           
var leftColumnWidth = $('.content-left').width();
var rightColumnWidth = $('.content-right').width();
if ($.cookie('columnPos')) {
    var cookieVars = $.cookie('columnPos').split(',');           
    var newPos = cookieVars[0];
    var newWidth = cookieVars[1];
    var newRightWidth = cookieVars[2];
    var posDiff = newPos - separatorPos;
    $('.content-columns-sep').offset({
        left: newPos});            
        separatorPos = newPos;
        $('.content-left').width(newWidth);
        $('.content-right').width(newRightWidth);
        leftColumnWidth = newWidth;        
        rightColumnWidth = newRightWidth;        
}            
$( ".content-columns-sep" ).mouseover(function(){
    $('.content-columns-sep').css('cursor', 'crosshair');
});
$( ".content-columns-sep" ).draggable({
    axis: "x",
    containment: "parent",
    cursor: "crosshair",
    grid: [10, 0],
    drag: function(event, ui) {
        var newPos = $('.content-columns-sep').position().left;
        var posDiff = newPos - separatorPos;
        separatorPos = newPos;
        var newWidth = leftColumnWidth + posDiff ;
        var newRightWidth = rightColumnWidth - posDiff;
        $('.content-left').width(newWidth);
        $('.content-right').width(newRightWidth);
        leftColumnWidth = newWidth;        
        rightColumnWidth = newRightWidth;
    },
    stop: function(event, ui) {
        var newPos = $('.content-columns-sep').position().left;
        var posDiff = newPos - separatorPos;
        separatorPos = newPos;
        var newWidth = leftColumnWidth + posDiff ;
        var newRightWidth = rightColumnWidth - posDiff;
        $('.content-left').width(newWidth);
        $('.content-right').width(newRightWidth);
        leftColumnWidth = newWidth;        
        rightColumnWidth = newRightWidth;
        $.cookie('columnPos', separatorPos+','+newWidth+','+newRightWidth);
    }
});     

       But I am unable to get the result as expected, splitter always overlaps one of the div by some 35 pixel or so, what could be the possible reasons ?
4

1 に答える 1

0

あなたは次のような地位を得ています

$('.content-columns-sep').position().left;

ただし、その値を使用して次のように設定しています。

$('.content-columns-sep').offset({ left: newPos});

これが重複の理由でしょうか？オフセットは位置と同じではありません。

を設定offsetしているときは、ドキュメント全体に対する要素の位置を設定していますがposition、取得しているときは、オフセットの親に対して相対的に取得しています。これはドキュメントである可能性がありますが、そうである必要はありません.

コード全体で同じものを使用する限り、どちらでも問題ありません。

于 2012-05-02T14:17:12.333 に答える