jquery - 有没有办法使用 jQuery 将绝对定位的 div 拖动到更宽的宽度？

Question

Here我有一个 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 }); }
);​

Answer 1

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

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

draggable-div-without-jquery-ui