перемещение div с помощью jQuery перемещает всю страницу в iPad

Question

У меня есть несколько вложенных элементов div с панелью меню и «перетаскиваемой» точкой следующим образом ...

    <div id="content">
        <div id="headermenu" class="headerfixed"></div>
        <div id="articles" class="articlediv"></div>
        <div id="adverts" class="advertfooter"></div>
        <div id="footermenu" class="footerfixed" >
            <div id="footerpreview" class="slideselect">SCALED INNER HTML</div>
            <div id="footerbutton" class="slidebutton"></div>
        </div>
    </div>

CSS для соответствующих элементов:

    div.slidebutton
    {position:absolute;
    background: url("images/hhgfooterbubble1.png") no-repeat;
    left:45px;
    bottom:8px;
    width:39px;
    height:39px;
    z-index:4;}

    div.footerfixed 
    {position:fixed; background: url("images/hhgfooterbar1.jpg") no-repeat; bottom:0px; left:0px; width:769px;height:49px; visibility: hidden; overflow-x:hidden; z-index:3;}

Я использую vmousemove, чтобы попытаться переместить footerbutton, но когда я касаюсь и перетаскиваю - вся страница (на iPad) перетаскивается влево и вправо, показывая черное пространство, а кнопка лишь немного перемещается.

$('#footermenu').bind('vmousemove', function (event)
    {
        y = event.pageY - window.pageYOffset;
        x = event.pageX;
        l = parseInt(footerbuttondiv.style.left);
        r = l + 39;
        c = 0;

        if (y >= 954)
        {
            if (x>=l && x<=r)
            {
                // alert (y + "," + x + "," + l + "," + r);
                c = x - 19;
                footerpreviewdiv.style.visibility = 'visible';
                footerbuttondiv.style.left = c + "px";
            }
        }
    });

Есть ли способ заставить контейнер div footermenu игнорировать перетаскивание, поэтому затрагивается только footerbutton. С благодарностью получена любая помощь.

Все отлично работает в Firefox / Firebug без ошибок.

Answer 1

Проблема заключалась в классах CSS в разделах «content» и «Articles».

Чтобы дисплей iPad оставался жестким и не двигался в ответ на боковые жесты пальцем CSS для этих DIVэлементы должны содержать overflow-x: hidden;element.

При проверке собственного CSS для каждого элемента, который отображался, когда была видна моя строка нижнего колонтитула, я обнаружил, что CSS для DIV «статьи» содержит ошибку.

Я изменилDIV для включения параметра overflow-x и режима боковой прокрутки был удален.