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

前端之家收集整理的这篇文章主要介绍了javascript – 滚动浏览器时使用错误的起始位置可拖动的jQuery UI元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我一直在使用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看起来像这样..

Box" checked="true" name="2_1"> Box" checked="true" name="2_2"> Box" checked="true" name="2_4">

这就是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;
            }   

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

最佳答案
这里全面回答:
jQuery draggable shows helper in wrong place after page scrolled

这是对我有用的修复:

确保父元素(如果它是正文的事件)有溢出:auto;组.我的测试显示解决方案修复了该位置,但它禁用了自动滚动功能.您仍然可以使用鼠标滚轮或箭头键滚动.

猜你在找的jQuery相关文章