Перетаскиваемые элементы пользовательского интерфейса jQuery, использующие неправильную начальную позицию при прокрутке браузера? - PullRequest
Новая
       5

Перетаскиваемые элементы пользовательского интерфейса jQuery, использующие неправильную начальную позицию при прокрутке браузера?

5 голосов
/ 14 октября 2010

Я использую 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 Ответ

4 голосов
/ 12 июля 2011

Здесь вы найдете исчерпывающий ответ: jQuery Dragable показывает помощник в неправильном месте после прокрутки страницы

Это исправление, которое работало для меня:

Убедитесь, что родительский элемент (событие, если это тело) имеет переполнение: auto; задавать. Мой тест показал, что это решение исправляет положение, но отключает функцию автопрокрутки. Вы все еще можете осуществлять прокрутку с помощью колесика мыши или клавиш со стрелками.

...