使用 jQuery 动态调整三栏设计答案

【问题标题】：Dynamically adjusting three column design with jQuery使用 jQuery 动态调整三栏设计
【发布时间】：2013-08-19 05:27:57
【问题描述】：

我正在尝试制作一个可以由用户在浏览器中动态调整大小的三列布局。我正在使用 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/

【问题讨论】：

标签： jquery css dynamic responsive-design multiple-columns

【解决方案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;
    ......
});

如果没有选择要拖动的元素，这也可以减少鼠标移动开销。此外，您需要调整宽度/左/右值。始终对当前值进行插值，计算增量并将其减去/添加到值中。

【讨论】：