javascript - 当通过jQuery调整容器位置时，JS拖动滑块停止工作

Question

我正在使用基于 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'});
});​

Answer 1

如果您将它向右拖动足够长的时间，它就可以工作，它曾经是以前的位置。

但是，您可以指定一个重新初始化事物的回调参数。

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

通常，您应该再次附加元素以避免多次使用相同的侦听器。这受插件编写方式的影响，但你可以这样做只是为了站在同一边。

$('#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'); 
});