Question

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

Answer 1

<强> http://jsfiddle.net/z9E5U/2/

我要告诉你一个vanilla 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，但无论初始大小如何，都可以轻松计算百分比

对于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，以及一个保持初始宽度的变量。然后，我们在mousedown元素上侦听.dragme事件。我们将dragging设置为true，获取包装器的偏移量并执行preventDefault以获得良好的衡量标准。然后我们按照鼠标移动并更改.dragme元素的css

如果mouseup变量为dragging

，我们还会监听true事件以停止拖动

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

希望有所帮助

如何在实时调整大小时跟踪栏的百分比

1 个答案: