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

Question

[它在Firefox中非常有效，但是在chrome和Opera中它不起作用。

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

并且除Firefox外不起作用

Answer 1

不要在CSS中固定设置：它可以在Firefox，铬，野生动物园，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; 
}

Answer 2

仅在CSS中使用：

#draggable{
    position:fixed !important;
}

如果同时使用可拖动和可缩放的样式，请从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")     
}   

Answer 3

如果在... draggable（...）上设置一个断点，您会看到它已添加位置：固定到element.style。

只需使用.style.position =“”撤消该操作；

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