1

我的两个 div 之间有一个拆分器，我可以移动拆分器并更改两个容器的大小。我想要做的是保存拆分器的位置，缓存中两个容器的宽度，并且在刷新浏览器时我希望能够保留这些宽度和位置。这是代码片段，

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 回答