Динамическая настройка дизайна трех столбцов с помощью 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; 
    ...... 
}); 

Это также снижает накладные расходы MouseMove, если ни один элемент не выбран для сопротивления. В дополнение к этому вам необходимо настроить свои значения влево/влево/вправо. Всегда интерполируйте по текущим значениям, вычисляя дельта и вычитая/добавляя это значение.