如何在固定位置使用jQuery draggable?

它在firefox中运行得很完美,但是在chrome和opera中它不起作用。

has position:fixed, and is .draggable()

它除了firefox之外不起作用

不要在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; } 

只需在CSS中使用:

 #draggable{ position:fixed !important; } 

如果同时使用draggable和rezisable从CSS中删除“!important”,然后将stop选项(拖动和resize时停止的回调)设置为此函数:

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