1

これが基本的に私が望むものです: jquery draggable にバインドされた別の要素を使用して、非常に長いコンテンツを含む div を上下にスクロールしたいと考えています。

<div id="wrapper">

<div id="container">

    <div id="timeline_wrapper">
        <div id="timeline">

        </div>
    </div>


    <div style="clear:both"></div>
    <div id="horizontal_control">
        <div id="controller"></div>
    <div>

</div>


$("#controller").draggable({
    revert: false,
    containment: "parent",
    axis: "x",
    create: function(){
        $(this).data("startLeft",parseInt($(this).css("left")));
        $(this).data("startTop",parseInt($(this).css("top")));
    },
    drag: function(event,ui){
        var rel_left = ui.position.left - parseInt($(this).data("startLeft"));
        var rel_top = ui.position.top - parseInt($(this).data("startTop"));

    }
});

詳細については、フィドルをご覧ください: http://jsfiddle.net/xNLsE/4/

4

1 に答える 1

0

これにはいくつかの手順が含まれます。

  1. ドラッグ可能な幅とスクロール可能な高さの比率を決定します。つまり、ユーザーがドラッグした距離に基づいて、スクロールするピクセル数を知る必要があります。

    これは最終的に次のようになります。

    var $controller = $('#controller')
    // The total height we care about scrolling:
    , scrollableHeight = $('#timeline').height() - $('#timeline_wrapper').height()
    // The scrollable width: The distance we can scroll minus the width of the control:
    , draggableWidth = $('#horizontal_control').width() - $controller.width()
    // The ratio between height and width
    , ratio = scrollableHeight / draggableWidth
    , initialOffset = $controller.offset().left;

    initialOffset後で使用するものも含めました。

  2. ドラッグした距離に比率を掛けて、スクロール可能な要素を配置します。dragドラッグ可能な要素でこれを行います。

    $controller.draggable({
    revert: false,
    containment: "parent",
    axis: "x",
    drag: function (event, ui) {
        var distance = ui.offset.left - initialOffset;

        $('#timeline_wrapper').scrollTop(distance * ratio);
    }
});

    スクロール可能なコントロールの初期オフセットを考慮する必要があることに注意してください。

例: http://jsfiddle.net/xNLsE/8/

于 2013-08-05T20:32:00.087 に答える