0

在这里，我有一个div在单击时动画以扩展其宽度的示例。无论如何我可以通过拖动而不是点击来实现这一点？

我真正想要的是一个可拖动的项目，如果用户将其拖动到 100 像素宽度之外的 75 像素，它会自动完成拖动动画，就像在 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 }); }
);​
4

2 回答 2

0

您将需要 JQueryUI 或其他一些类似的插件来完成此操作。有了它，您可以使用 $('.handle').draggable(); 使您的栏可拖动。

如果您不想使用您可能对此感兴趣的任何其他插件：

没有 jquery-ui 的可拖动 div

于 2012-12-06T14:38:55.637 回答
0

好吧，您的 jsfiddle 示例对我来说有点模糊，要么是您的目标，但我知道您想要这样的东西，对吗？这件事有点棘手，它实际上取决于您的 UI，也可能会根据您的代码变得相当错误。

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

于 2012-12-06T16:24:50.573 回答