JQuery UI Droppables в контейнерах прокрутки переполнения - PullRequest
Новая
       15

JQuery UI Droppables в контейнерах прокрутки переполнения

0 голосов
/ 01 марта 2010

Я задавал этот вопрос уже на форумах jQuery, но они не так активны, как здесь.

Я столкнулся с проблемой, когда у меня есть несколько областей, которые можно удалить на странице. У меня есть «статичная» область сбрасывания, которая никогда не будет перемещаться, выше элемента div, который имеет несколько областей сбрасывания и может прокручиваться (overflow: scroll). Когда я прокручиваю элемент div, чтобы одна из элементов сброса в элементе div находилась под статическим элементом сброса, событие drop вызывается для обеих областей, если я сбрасываю в статической области.

Извините, это объяснение может быть неопределенным, поэтому я собрал образец:

Markup: 

<div style="float:left; width:300px; height: 300px; border: 1px solid #000;">
    <ul class="draggables">
        <li>Draggable</li>
        <li>Draggable</li>
        <li>Draggable</li>
        <li>Draggable</li>
        <li>Draggable</li>
    </ul>
</div>
<div style="float:left; width:300px; height: 300px; border: 1px solid #000;">
    <div class="static-droppable" style="width:298px; height:100px; border:1px solid #f00;">Static Drop Area</div>
    <div style="width:298px; height:198px; overflow-y:scroll; border:1px solid #0f0;">
        <ul class="scroll-droppables">
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
        </ul>
    </div>
</div>

Javascript: 

//create draggables
jQuery('.draggables li').draggable({
    revert: 'invalid',
    cursor: 'move',
    helper: 'clone'
});

//the static droppable area
jQuery('.static-droppable').droppable({
    greedy: true,
    drop: function(event, ui) {
        alert('Dropped on static drop area!');
    }
});

//scrolling droppables
Query('.scroll-droppables li').droppable({
    drop: function(event, ui) {
        alert('Dropped on scrolling drop area!');
    }
});

Я пытался сделать область статического падения «жадной», но, похоже, это не помогло в этой ситуации.

Есть идеи, как остановить это?

1 Ответ

0 голосов
/ 15 апреля 2010

У меня была такая же проблема. Мне удалось это исправить, сначала инициализировав «статический» Droppable ..

...