1

我正在慢慢弄清楚这一点。我有多个可调整大小的条，它们有一个显示其中百分比的指针。现在这会更新所有条形指针，但只会调整当前被拖动的条形指针的大小。我希望最初显示数字，然后如果您选择其中一个指针并拖动它，那么唯一会更新其百分比的就是那个。

这是我的 HTML：

<div id="wrapper" class="clearfix">
    <div class="r_bar"><span class="resizable" style="width: 34%;"><div class="marker"><p></p></div></span></div>
<br />
    <div class="r_bar"><span class="resizable secondColor" style="width: 50%;" title="50"><div class="marker"><p></p></div></span></div>
</div>

到目前为止，这是我的 jQuery：

$(function(){
var initialWidth = $(this).find('span').css('width').replace('%', '');
initialWidth = parseInt(initialWidth);
var dragging = false;

$('.resizable').mousedown(function(e){
    dragging = true;
    $(this).addClass('moving');
    var parentOffset = $(this).parent().offset();

    $this = $(e.currentTarget);
    e.preventDefault();

    $(document).mousemove(function(e){
        if (dragging == true){
            $this.css("width",e.pageX - parentOffset.left);
            var percentageChange = (e.pageX - parentOffset.left) / initialWidth * 100
            $('.moving p').html(percentageChange.toFixed(0));
        }       
    });
});

$(document).mouseup(function(e){
    if (dragging){
        dragging = false;
        $(this).removeClass("moving");
    }
});
});

我无法根据内联样式宽度获得要显示的栏的初始宽度，也无法隔离正在调整大小的当前栏并相应地更新百分比。如果有任何已被拖动，则所有条数都会更新。该栏不会在未被拖动的那个上移动......但数字仍会更新。

有同样的问题。如果移动一个条形，则数字会更新得很好。但是当你去拖动另一个栏时，两组数字同时更新为相同的数字。

4

2 回答 2

0

一个问题与关闭有关。因为 mousemove 事件处理程序位于 mousedown 处理程序的闭包中，所以它可以访问局部变量。但是，您没有使用 var 语句将 $this 声明为变量，因此它不可见。

更改此行

$this = $(e.currentTarget);

到

var $this = $(e.currentTarget);

此外，每次移动时添加新的 mousemove 事件都会遇到问题（内存泄漏）。您可能希望像使用 mouseup 一样提取该功能。

$(function(){
  var initialWidth = $(this).find('span').css('width').replace('%', '');
  initialWidth = parseInt(initialWidth);
  var dragging = false;
  var $this;
  var parentOffset;

  $('.resizable').mousedown(function(e){
    dragging = true;
    $(this).addClass('moving');
    parentOffset = $(this).parent().offset();

    $this = $(e.currentTarget);
    e.preventDefault();

  });

  $(document).mousemove(function(e){
    if (dragging == true){
      $this.css("width",e.pageX - parentOffset.left);
      var percentageChange = (e.pageX - parentOffset.left) / initialWidth * 100
      $('.moving p').html(percentageChange.toFixed(0));
    }       
  });


  $(document).mouseup(function(e){
    if (dragging){
        dragging = false;
        $(this).removeClass("moving");
    }
  });
});

注意——我没有测试，所以可能还有其他问题。

于 2013-05-31T23:05:14.990 回答
0

放弃这个，因为我无法让它正常工作。

于 2013-06-06T19:38:44.817 回答