使用jQuery動態調整三列設計

Question

我試圖製作一個三列布局，可以在用戶瀏覽器中動態調整大小。我使用jQuery來控制列的大小調整。前兩列完美調整，但我似乎無法得到正確的兩列以適當的方式運作。

當鼠標向左拖動時，列向右調整。任何幫助以正確的方式工作將是非常好的！我使用jQuery是下方，這裏是的jsfiddle：http://jsfiddle.net/cleverdirt/hsaL9/

$(document).ready(function(){ 

    $(".first").on("mousedown", function(e){ 
    mousedownFirst = true; 
    }); 
    $(".second").on("mousedown", function(e){ 
    mousedownSecond = true; 
    }); 
    $(".container").on("mouseup", function(e){ 
    mousedownFirst = false; 
    mousedownSecond = false; 
    }); 
    $(".container").on("mousemove", function(e){ 

    var offset = $(this).offset().left; 

    if(mousedownFirst){ 
     $(".left").css("width", e.pageX - offset); 
     $(".middle").css("left", e.pageX - offset); 
    } 
    if(mousedownSecond){ 
     $(".right").css("width", e.pageX - offset); 
     $(".middle").css("right", e.pageX - offset); 
    } 

    }); 

}); 

http://jsfiddle.net/cleverdirt/hsaL9/

Answer 1

基本上你的偏移始終爲0，你需要做的是，存儲當前拖barhandle到一個變量和什麼在mousemove上檢索這個對象的偏移量，而不是在這個上下文中$（this）。

類似：

$(".first").on("mousedown", function (e) { 
    mousedownFirst = true; 
    current = $(this); 
}); 
$(".second").on("mousedown", function (e) { 
    mousedownSecond = true; 
    current = $(this); 
}); 
$(".container").on("mouseup", function (e) { 
    mousedownFirst = false; 
    mousedownSecond = false; 
    current = null; 
}); 
$(".container").on("mousemove", function (e) { 
    if (current == null) { return; } 
    var offset = $(this).offset().left; 
    ...... 
}); 

如果選擇阻力沒有元素也減少了鼠標移動的開銷。 另外你需要調整你的widh/left/right值。始終對當前值進行插值計算增量，並將其減去/添加到該值。