有沒有辦法讓一個絕對定位的div可以使用jQuery拖動到更寬的寬度？

Question

Here我有一個div的示例，點擊動畫可以展開它的寬度。無論如何，我可以通過拖動而不是點擊來實現這一點嗎？

我真正想要的是一個可拖動的項目，如果用戶在100px寬度內拖動75px，它會自動完成拖動動畫，就像在iOS的通知欄中一樣。

當前的jQuery：

$('.handle').toggle(
    function() { $('.bar').animate({right: 0, opacity: 1.0}, { duration: 0, queue: false }); }, 
    function() { $('.bar').animate({right: -165, opacity: 0.6}, { duration: 0, queue: false }); } 
); 

$('.handle').toggle(
    function() { $('.handle').animate({right: 200, opacity: 1.0}, { duration: 0, queue: false }); }, 
    function() { $('.handle').animate({right: 35, opacity: 0.6}, { duration: 0, queue: false }); } 
);​ 

Answer 1

您需要jQueryUI的或一些其他類似的插件來實現這一目標。有了這個，你可以通過使用$（'。handle'）來讓你的條可拖動。

如果你不希望使用任何其他插件你可能有興趣在此：

draggable-div-without-jquery-ui

Answer 2

嗯，你的jsfiddle例子是有點雲裏霧裏對我來說，無論是你的目標，但我」我明白你想要這樣的東西，對吧？這件事有些微妙，它取決於你的用戶界面，也可能會變得非常麻煩，這取決於你的代碼。

http://jsfiddle.net/3Tn2F/

var bar = $(".bar"); 
bar.draggable({ 
    start:function(){ 
    } 
}).mouseup(function(){ 
    $(this).animate({left:300, opacity: 0.6}, { duration: 1000, queue: false }); 
}); 
$(".handle").droppable({ 
    over: function(event, ui) { 
     bar.trigger('mouseup'); 

    } 
}); 

上面的代碼是基於我提供，但定製，以你的情況的jsfiddle例子。

BR