2

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

4

1 回答 1

0

基本上，您的偏移量始终为 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 开销。此外，您需要调整宽度/左/右值。始终对当前值进行插值，计算增量并将其减去/添加到值中。

于 2013-08-16T18:24:10.190 回答