Làm thế nào để sử dụng jQuery draggable với vị trí cố định?

Question

Nó hoạt động hoàn hảo trong firefox, nhưng ví dụ, chrome và opera nó không hoạt động.

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

và nó không hoạt động trừ firefox

Answer 1

không thiết lập cố định trong CSS: nó hoạt động trong firefox, crom, 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

Chỉ cần sử dụng trong CSS của bạn:

#draggable{ 
    position:fixed !important; 
} 

Nếu bạn đang sử dụng cả hai kéo và có thể tháo rời xóa "! Quan trọng" khỏi CSS, sau đó đặt dừng tùy chọn (gọi lại khi kéo và dừng thay đổi kích thước) để chức năng này:

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