jQuery draggable - элемент перебирает контейнер в Chrome / Safari - PullRequest
Новая
       25

jQuery draggable - элемент перебирает контейнер в Chrome / Safari

1 голос
/ 29 декабря 2011

У меня этот код:

HTML 

<div class="draggable_main_container">
    <div class="draggable_container">
        <div class="draggable">
            <div class="minus">
                label
            </div>
        </div>
    </div>
</div>

CSS 

.draggable_main_container
{
    width:134px;
    overflow:auto;
    position:relative;
    height:350px;
}

.draggable_container
{
    height:300px;
    position:relative;
    overflow:visible; 
    background-color:blue;  
}

.draggable
{           
    background-color:red;
    height:134px;
    width:134px;
    cursor:pointer;
    position:relative;
}

.draggable .minus
{
    position:absolute;
    left:50px;
    bottom:-20px;    
    width:32px;
    height:20px;  
    background-color:yellow;  
}

JQuery 

$(".draggable").draggable({
    axis: "y",
    containment: 'parent'
});

сейчас на Firefox проблем нет! В Chrome / Safari блокируется, когда он получает дно контейнера.

Затем, если я нажимаю и снова прокручиваю вниз, div перемещается над контейнером. Когда он получает высоту основного контейнера (350 пикселей), он также создает полосы прокрутки.

Что ж, избежать полос прокрутки легко, просто добавьте overflow:visible; к draggable_main_container.

Но мне действительно нужно блокировать перетаскиваемый элемент, когда он получает родительское основание. Как мне это сделать?

Я думаю, что проблема в позиции: абсолютный элемент, прикрепленный к перетаскиваемому элементу (.minus; фактически, если я его удалю, все работает ...)

1 Ответ

1 голос
/ 29 декабря 2011

так что я немного поигрался с твоим кодом и что-то понял. И да, это исправление.

Итак, вы ограничиваете свое перетаскиваемое родительским объектом перетаскиваемого объекта .draggable_container. Теперь, в draggable, у вас есть минус, который немного расширяется снизу, и это нормально, пока он не торчит «снаружи» .draggable_container. За исключением того, что он не торчит снаружи. Элемент минус расширяет .draggable_container Теперь, когда вы щелкаете, а затем снова перемещаете перетаскиваемый объект, его родительский элемент временно становится больше, и поэтому он может прокручиваться дальше. Каждый раз, когда вы перетаскиваете его немного больше, вы расширяете .draggable_container.

Теперь я не знаю, почему это проблема, когда вы нажимаете, но это то, что происходит.

Исправление заключается в добавлении 20px отступов к нижней части .draggable_container. Это останавливает расширение элемента .minus .draggable_container.

У вас нет небольшого эффекта от "ярлыка", выходящего за пределы синей рамки, но вы можете найти другой способ симулировать это.

...