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 属性を持つ実際のドラッグ可能な要素を作成して、それを表示します。この例では 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次の場合、ドラッグを停止するイベントもリッスンしますdraggingtrue

オフセット ( e.pageX - parentOffset.left) を初期幅と比較してパーセンテージを計算します。

それが役立つことを願っています

于 2013-05-28T22:18:45.677 に答える