jquery - 固定位置でドラッグ可能なjQueryを使用するには?

Question

Firefox では完璧に動作しますが、Chrome や Opera では動作しません。

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

そして、Firefox以外では機能しません

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

Answer 2

CSSで使用するだけです：

#draggable{
    position:fixed !important;
}

ドラッグ可能とサイズ変更可能の両方を使用している場合は、CSS から「!important」を削除してから、停止オプション (ドラッグとサイズ変更が停止したときのコールバック) をこの関数に設定します。

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