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

Question

I have a progress bar that acts more like a bar chart. I pull the initial width using JSON and have it to where the bar is resizable to the right. previous work I'm trying to track and display the changing percentages as the bar is dragged either left or right. My attempts so far have not been fruitful using jquery ui. Does anyone have an example or suggestion I could use to figure this out?

Answer 1

http://jsfiddle.net/z9E5U/2/

I'm gonna show you a vanilla jQuery way of doing it (no jQuery UI). First up, we create our html elements:

<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>

So we have a wrapper with a class .dragwrapper . This is used to be the reference to which the mouse is moving. Then we have our actual draggable element with a class .dragme and a few css attributes to make it visible. I am using an initial size of 120px in this example, but the percentage can easily be calculated regardless of the initial size

For out javascript (make sure you have jQuery loaded):

$(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');
        }
    });
});

So, we are first declaring a variable called dragging which is initially set to false , as well as a variable holding our initial width. We then listen for a mousedown event on the .dragme element. We set dragging to true , get the offset of the wrapper and do a preventDefault for good measure. We then follow the mouse movement and change the css of the .dragme element

We also listen for a mouseup event to stop the dragging if dragging variable is true

You compare the offset ( e.pageX - parentOffset.left ) with the initial width to calculate the percentage

Hope that helps