1

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

4

1 回答 1

1

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

我将向您展示一种普通的 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>

所以我们有一个带有 class 的包装器.dragwrapper。这用于作为鼠标移动的参考。然后我们有一个实际的可拖动元素，它带有一个类.dragme和一些 css 属性以使其可见。在此示例中，我使用 120 像素的初始大小，但无论初始大小如何，都可以轻松计算百分比

对于 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，以及一个保存初始宽度的变量。然后我们监听元素mousedown上的事件。.dragme我们设置dragging为true，获取包装器的偏移量并preventDefault进行良好的测量。然后我们跟随鼠标移动，改变.dragme元素的css

如果变量是，我们还会监听一个mouseup事件以停止拖动draggingtrue

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

希望有帮助

于 2013-05-28T22:18:45.677 回答