Jquery 스플리터가 쿠키의 위치를 ​​저장합니다.

Question

두 개의 div 사이에 스플리터가 있습니다. 스플리터를 이동하고 두 컨테이너의 크기를 변경할 수 있습니다. 내가하고 싶은 것은 스플리터의 위치, 캐시에 두 컨테이너의 너비를 저장하고 브라우저를 새로 고칠 때 그 너비와 위치를 유지할 수 있기를 원합니다.

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

이 될 수 있음 : 다음 코드의 조각,

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 ? 

Answer 1

당신은

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

으로 위치를 얻고 그러나 당신이로 설정하기 위해 그 값을 사용하고이다 중복되는 이유는 무엇입니까? 오프셋은 위치와 동일하지 않습니다.

offset으로 설정하면 요소의 위치가 전체 문서에 상대적으로 설정되지만 position이되면 오프셋 부모를 기준으로 문서가 될 수 있지만 그럴 필요는 없다.

전체 코드에서 동일하게 사용하는 한 괜찮습니다.