JS拖動滑塊停止工作，當通過jQuery調整容器位置時

我使用基於JS的拖動滑塊DragDealer。 slider div放置在使用jQuery運行的內容滑塊中。拖動滑塊工作，只要其父div不動畫向左移動200px。JS拖動滑塊停止工作，當通過jQuery調整容器位置時

小提琴：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的（比JS等爲Dragdealer）：

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

來源

2012-07-24 gentrobot

我試圖把div 1和2放在一個父div中，並調整了父div的位置w.r.t到主div，但是這也行不通。 – gentrobot 2012-07-24 06:51:20

，如果你將其拖動到右邊長它的工作原理足夠，它曾經是之前的地方。

你可以擁有的是指定一個回調參數來重新初始化事物。

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

來源

2012-07-24 07:15:01

非常感謝！它爲我工作。我應該考慮重新初始化它:) – gentrobot 2012-07-24 07:20:43

JS拖動滑塊停止工作，當通過jQuery調整容器位置時

回答

相關問題