jQuery Draggable и переполнение проблема [закрыто]

У меня возникает нежелательный эффект, когда я перетаскиваю div из контейнера div, который установлен как overflow: scroll.

Я нашел пример кого-то еще, где у них была проблема, но я не смог найти решение

пример на Paste bin

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

6 69
jquery-ui-sortable drag-and-drop

6 ответов:

У меня была аналогичная проблема, включающая перетаскивание между двумя переполнениями-auto divs. С помощью предыдущих ответов я обнаружил, что эта комбинация работает для меня (Safari 5.0.3, jquery-1.4.4, jquery-ui-1.8.7):

appendTo: 'body',
containment: 'window',
scroll: false,
helper: 'clone'
89

appendTo

элемент, SelectorDefault:'parent'

элемент, переданный или выбранный опцией appendTo, будет использоваться в качестве контейнера перетаскиваемого помощника во время перетаскивания. По умолчанию добавляется в тот же контейнер, перетаскивать.

примеры кода Инициализируйте перетаскиваемый объект с указанным параметром appendTo.

$('.selector').draggable({ appendTo: 'body' });
53

это, конечно, обращает внимание на документацию

http://docs.jquery.com/UI/Draggable#option-scroll

свиток

тип: Boolean
по умолчанию:true
Если установлено значение true, контейнер автоматически прокручивается при перетаскивании.

все, кто входит сюда, учитесь на моей ошибке, RT (F)M!!!

32

решение для клонирования работает, но имеет две проблемы.

во-первых: клон добавляются к телу. В зависимости от вашего css, ваш элемент может изменить стили, так как перед его запуском он находится внутри другого элемента и во время перетаскивания он будет непосредственно на элементе body.

во-вторых: иногда элемент должен двигаться, и клон пусть объект там.

Итак, решение этой проблемы является:

$('.selector').draggable({
    helper: 'clone',
    start: function(){
        $(this).hide();             
    },
    stop: function(){
        $(this).show()
    }
});
19

установка опции прокрутки не останавливает детей от скрытия в области переполнения. Я придумал работу-раунд, который использует опцию helper. Проверьте это:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

также Вот ссылка на другой пост, который я сделал:

пользовательского интерфейса jQuery перетаскиваемым элементам не 'перетаскивать' вне прокрутки див

2

вы также можете указать, какие типы элементов вы не хотите включать.

<div class="draggable"> 
    <h2>This will drag the div</h2>
    <ul>
       <li>This won't drag the div</li>
    </ul>
</div>

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

$('.draggable').draggable({cancel : 'ul'});
-1