Question

I am using JS based Drag Slider DragDealer. The slider div is placed in a content slider that runs using jQuery. The Drag Slider works as long as its parent div is not animated to move to left by 200px.

Fiddle: 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(other than JS for Dragdealer):

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

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