有没有办法使用 jQuery 使绝对定位的 div 可拖动到更宽的宽度？答案

【问题标题】：Is there a way to make an absolute positioned div draggable to a wider width using jQuery?有没有办法使用 jQuery 使绝对定位的 div 可拖动到更宽的宽度？
【发布时间】：2012-12-06 13:56:35
【问题描述】：

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 }); }
);

【问题讨论】：

你检查jqueryui.com/resizable了吗？

标签： jquery css html drag

【解决方案1】：

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

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

draggable-div-without-jquery-ui

【讨论】：

【解决方案2】：

好吧，您的 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 示例，但可以根据您的情况进行定制。

【讨论】：