如何在实时调整大小时跟踪条形图的百分比

Question

我有一个进度条，它的作用更像一个条形图。我使用JSON拉取初始宽度，并将其调整到可以向右调整条形图大小的位置。previous work当向左或向右拖动条形图时，我正在尝试跟踪和显示变化的百分比。到目前为止，我使用jquery ui的尝试还没有取得成果。有没有人有我可以用来解决这个问题的例子或建议？

Answer 1

我将向您展示一种简单的jQuery方法(无jQuery UI)。首先，我们创建html元素：

<div class="dragwrapper" style="margin: auto; width: 100px">
    <div style="width: 120px; height: 20px; background-color:#F00; cursor: w-resize" class="dragme"></div>
</div>
<div class="result">0%</div>

所以我们有一个带有.dragwrapper类的包装器。这通常是鼠标移动到的引用。然后我们有了实际的可拖动元素，它有一个类.dragme和一些css属性来使其可见。在本例中，我使用的初始大小为120px，但无论初始大小如何，都可以很容易地计算出百分比

对于out javascript (确保你已经加载了jQuery )：

$(function(){
    var initialWidth = 120;
    var dragging = false;

    $('.dragme').mousedown(function(e){
        dragging = true;
        var parentOffset = $(this).parent().offset();
        e.preventDefault();

        $(document).mousemove(function(e){
            if (dragging == true){
                $('.dragme').css("width",e.pageX - parentOffset.left);
                var percentageChange = (e.pageX - parentOffset.left) / initialWidth * 100
                $('.result').html(percentageChange + "%");
            }       
        });
    });

    $(document).mouseup(function(e){
        if (dragging){
            dragging = false;
            console.log('drag stopped');
        }
    });
});

因此，我们首先声明一个名为dragging的变量，该变量最初设置为false，以及一个保存初始宽度的变量。然后，我们侦听.dragme元素上的mousedown事件。我们将dragging设置为true，获取包装器的偏移量，并执行preventDefault。然后，我们跟随鼠标移动并更改.dragme元素的css

如果dragging变量为true，我们还将侦听mouseup事件以停止拖动

将偏移量(e.pageX - parentOffset.left)与初始宽度进行比较以计算百分比

希望这能有所帮助