如何使用固定位置的jQuery可拖动？

Posted 2023-05-08

【中文标题】如何使用固定位置的jQuery可拖动？

【英文标题】：How to use jQuery draggable with fixed position?

【发布时间】：2011-03-25 05:03:54

【问题描述】：

它在firefox中可以完美运行，但是在chrome和opera中就不行了。

<div> has position:fixed, and is .draggable()

除了firefox之外它不起作用

【问题讨论】：

当然，您不希望它可以拖动并保持在同一位置吗？你会撕掉你的屏幕。

我可以。我希望它在视口中“固定”，但我也可以稍微向右或向左移动（可拖动），如果我放下它，它应该在新位置“固定”。

我在 Chrome 和 FF 中得到相同的行为：here

sje397 的代码在 IE8 和 Opera 10.6 中也适用于我，但由于 css，该元素粘在底部。如果您指定顶部和左侧，则一切正常。

【参考方案1】：

不要在 CSS 中设置固定：它适用于 firefox、chromium、safari、iexplore

var div = $('#id');
div.resizable(

    stop: function(event, ui)
                           
        var top = getTop(ui.helper);
        ui.helper.css('position', 'fixed');
        ui.helper.css('top', top+"px");         
           
);
div.draggable(

    stop: function(event, ui)
               
        var top = getTop(ui.helper);
        ui.helper.css('position', 'fixed');
        ui.helper.css('top', top+"px");
    
);

function getTop(ele)

    var eTop = ele.offset().top;
    var wTop = $(window).scrollTop();
    var top = eTop - wTop;

    return top; 

【讨论】：

不错！您也可以使用位置：固定；用相对位置初始化并修复第一次拖动跳转jsfiddle.net/dX8N3/24

不要忘记添加jquery.ui（否则会报错TypeError: $(...).resizable is not a function ;)

【参考方案2】：

只需在你的 CSS 中使用：

#draggable
    position:fixed !important;

如果你同时使用 draggable 和 rezisable，从 CSS 中删除 "!important"，然后将 stop 选项（拖动和调整大小停止时的回调）设置为该函数：

function stop(event)
    if(event.type === "resizestop")
        var topOff = $(this).offset().top - $(window).scrollTop()
        $(this).css("top",topOff)
    
    $(this).css("position","fixed")     
   

【参考方案3】：

如果你在 ...draggable(...); 上放置一个断点； 你会看到它被添加到了 position:fixed 到 element.style 中。

只需使用 .style.position =""; 撤消它即可

我的代码清除了样式，因此它会退回到 css 声明。 对于较旧的 jquery ui 版本，您可能需要执行拖动停止处理程序。我对此表示怀疑。 但绝对不是最新的。