jquery - 使用 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。您需要做的是将当前拖动的条形 handle 存储到变量中，并在鼠标移动时检索此对象的偏移量，而不是此上下文中的 $(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;
    ......
});

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