有没有办法让一个绝对定位的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