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.你需要做的是，将当前拖动的条柄存储到一个变量中，并在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开销。另外，您需要调整widh / left / right值。始终对计算增量的当前值进行插值，并将其减去/加到该值。

使用jQuery动态调整三列设计

1 个答案: