0

JS ベースの Drag Slider DragDealerを使用しています。スライダー div は、jQuery を使用して実行されるコンテンツ スライダーに配置されます。ドラッグ スライダーは、その親 div が 200 ピクセル左に移動するようにアニメーション化されていない限り機能します。

フィドル: http://jsfiddle.net/gentrobot/9b5Xg/3/

HTML:

<div style="position:relative;width:400px;height:100px;overflow:hidden;">
    <div id="1" style="width:200px;float:left;position:absolute;left:0px;">
        Test
    </div>
    <div id="2" style="width:200px;float:left;position:absolute;left:200px;">
       <!-- Drag Slider div starts -->
        <div id="my-slider" class="dragdealer">
            <div class="red-bar handle">drag me</div>
        </div>
       <!-- Drag Slider div ends -->
    </div>
</div>
<a href="#" id="clk">Click to slide</a>

jQuery (Dragdealer の JS 以外):

$('#clk').click(function(){
    $('#1').animate({left:'-200px'});
    $('#2').animate({left:'0px'});
});​
4

1 に答える 1

1

It works if you drag it to the right long enough, where it used to be before.

What you can have though is specifying a callback parameter that reinitializes the thing. 

$('#2').animate({left:'0px'}, function(){
    new Dragdealer('my-slider'); 
});

Normally you should append the element back again to avoid having the same listeners more than once. This is influenced by the way the plugin was written but you can do it like this just to be on the same side.

$('#2').animate({left:'0px'}, function(){
    var t = $(this);
    var random_placeholder = $('<div></div>').insertBefore(t);
    $(this).insertAfter(random_placeholder);
    random_placeholder.remove(); 
    new Dragdealer('my-slider'); 
});
于 2012-07-24T07:15:01.797 に答える