滚动浏览器时使用错误起始位置的可拖动 jQuery UI 元素?

Posted

技术标签:

【中文标题】滚动浏览器时使用错误起始位置的可拖动 jQuery UI 元素?【英文标题】:Draggable jQuery UI elements using wrong start position when browser is scrolled? 【发布时间】:2011-04-25 06:29:57 【问题描述】:

我一直在使用 jQuery 1.4.2 和 jQuery UI 1.8.5 来创建可恢复到原始位置的可拖动元素。但是有一个问题;当您滚动浏览器窗口时,开始位置将更改为从更高的位置开始。看起来使用了绝对位置,但没有考虑滚动的数量,但我不能确定。我在 FireFox 中完成了所有的开发和测试。

这是我录制的一个短视频。http://www.youtube.com/watch?v=KPW4ljpjuF8

javascript 初始化代码如下所示..

    $( '.frameworkNavigationItem' ).draggable(
        appendTo : 'body',
        revert : 'invalid',
        containment : 'body',
        zIndex : 999
    );

其中一个元素的 html 如下所示..

<div class="frameworkNavigationItem frameworkNavigationItemColor">
    <div class="frameworkNavigationItemName">Home</div>
    <div class="frameworkNavigationItemDisplay">
        <input type="checkbox" checked="true" name="2_1">
        <input type="checkbox" checked="true" name="2_2">
        <input type="checkbox" checked="true" name="2_4">
    </div>
    <div class="frameworkNavigationItemController">
        <input type="text" maxlength="255" value="mainNews" name="2_co">
    </div>
    <div class="frameworkNavigationItemChild">
        <select name="2_ch">
            <option value="0">-</option>
        </select>
    </div>
    <div style="clear: both;"></div>        
</div>

这是与之配套的 CSS。

    .frameworkNavigationItem
    
        background-color            : #CACACA;
        height                      : 20px;
        line-height                 : 20px;
        margin                      : 2px 0;
        vertical-align              : middle;
    

        .frameworkNavigationItem:hover
        
            background-color            : #BABABA;
        

            .frameworkNavigationItem:hover input, .frameworkNavigationItem:hover select
            
                background-color            : #BABABA;
            

        .frameworkNavigationItem input, .frameworkNavigationItem select
        
            background-color            : #CACACA;
            border                      : 0;
            font-size                   : 10px;
        

        .frameworkNavigationItemColor
        
            background-color            : #DADADA;
        

            .frameworkNavigationItemColor input, .frameworkNavigationItemColor select
            
                background-color            : #DADADA;
            

        .frameworkNavigationItemName
        
            float                       : left;
            height                      : 15px;
            padding-left                : 5px;
        

        .frameworkNavigationItemDisplay
        
            float                       : right;
            text-align                  : right;
            width                       : 48px;
        

        .frameworkNavigationItemController
        
            float                       : right;
            width                       : 160px;
        

            .frameworkNavigationItemController input
            
                width                   : 150px;
            

        .frameworkNavigationItemChild
        
            float                       : right;
            width                       : 160px;
        

            .frameworkNavigationItemChild select
            
                width                   : 150px;
               

请帮帮我!我不知道为什么会这样。

【问题讨论】:

【参考方案1】:

这里得到了全面的回答: jQuery draggable shows helper in wrong place after page scrolled

这是对我有用的修复:

确保父元素(如果是主体则为事件)有溢出:自动;放。我的测试表明该解决方案修复了该位置,但它禁用了自动滚动功能。您仍然可以使用鼠标滚轮或箭头键滚动。

【讨论】:

这也为我解决了这个问题,谢谢。当然,我不想在 ul 父元素上自动溢出,所以必须进行实验 - 诅咒! 因为在我的情况下使用溢出会产生其他不良后果,我正在使用 sortable 并最终在@mordy 的答案中提供的那个页面上使用了一个助手。在我点击保存前 1 秒触发了蹩脚的评论编辑超时。 :// 这对我来说包含可拖动到容器(带有滚动条)的内容。我使用了 helper:"clone",这行得通

以上是关于滚动浏览器时使用错误起始位置的可拖动 jQuery UI 元素?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery UI,可拖动,可放置,自动滚动

Angular CDK - 在嵌套的可滚​​动 div 内滚动和拖动元素的问题

jQuery UI 可拖动在我的可拖动 div 上设置“位置:相对”

jQuery-ui 可拖动滚动仅垂直

滚动后可拖动的jQuery UI不粘在网格上

使用网格恢复“无效”不会使用 jQuery UI Draggable 返回到起始位置