如何在固定位置下使用jQuery draggable？

Question

如何在固定位置下使用jQuery draggable？

10

在Firefox中它工作得很完美，但在IE、Chrome和Opera中却不起作用。

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

只有在Firefox浏览器中才能正常工作。

- rafaello

4

你肯定不希望它可以被拖动却又保持在原地吧？那样会把你的屏幕撕掉。 - sje397

1

我可以。我希望它在视口内“固定”位置，但我也能够将其向右或向左轻微移动（可拖动），如果我放置它，它应该在新位置上“固定”。 - rafaello

我在Chrome和FF中得到了相同的行为：这里。 - sje397

sje397的代码在我的IE8和Opera 10.6上也能正常工作，但由于CSS的原因，该元素会固定在底部。如果您指定一个顶部和左侧位置，那么一切都会正常工作。 - ZippyV

3个回答

1

只需在您的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")     
}

- Ivan Castellanos

0

如果您在...draggable(...);上设置了断点，您会发现它将position:fixed添加到element.style中。

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

我的代码清除了样式，这样它就会回到css声明。对于旧版jquery ui版本，您可能需要执行拖动停止处理程序。但我怀疑。但最新版本肯定不需要。

- thang van Ung

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ZiTAL · Accepted Answer

在CSS中不要设置固定宽度：它在Firefox、Chromium、Safari和Internet Explorer中都可以工作。

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