Пользовательский интерфейс jQuery: перетащите сортировку изнутри аккордеона - PullRequest
Новая
       20

Пользовательский интерфейс jQuery: перетащите сортировку изнутри аккордеона

2 голосов
/ 01 декабря 2010

У меня есть два сортируемых списка, которые связаны между собой.Один просто на странице, другой в аккордеоне.(Я использую аккордеон в качестве контейнера для другого списка)

Моя цель заключается в том, чтобы пользователь мог открыть аккордеон и вытащить предметы из этого списка на страницу.Это работает - за исключением того, что заполнитель исчезает при выходе из аккордеона.Я пробовал помощник: «клон» и увеличение zIndex.

Вот упрощенная версия кода: 

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $( "#inside" ).accordion({
                collapsible: true,
                fillSpace: true,
                active: false   
            });
        $("#ulOutsideList, #ulInsideList").sortable({
                opacity: 0.7,
                revert: 100,
                scroll: true,
                helper: 'clone',
                zIndex: 50000,
                connectWith: ".connectedSortable",                  
            });
    });
</script>


    <div id="outside"> <!-- 1. Pick a Store -->
        <ul id="ulOutsideList" class="connectedSortable">
        <li>outside 1</li>
        <li>outside 2</li>
        <li>outside 3</li>
        </ul>
    </div> <!-- end 1. Pick a Store -->

    <div style="clear:both"></div>

    <div id="inside">
        <h3>container</h3>
        <ul id="ulInsideList" class="connectedSortable">
            <li>inside 1</li>
            <li>inside 2</li>
            <li>inside 3</li>
        </ul>
    </div>

Ответы [ 2 ]

2 голосов
/ 08 июля 2011

В вашем сортируемом вызове вы хотите использовать следующие опции:

helper: "clone", appendTo: "body", // или любой элемент, к которому вы хотите прикрепить клон-помощник

Это делает две вещи. Сначала он создает копию перетаскиваемого элемента (опция помощника), затем он присоединяет этот помощник к указанному элементу (опция appendTo).

Подобные вопросы здесь: jQuery-Ui: Невозможно перетащить объект за пределы аккордеона и здесь: jquery sortable нельзя перетаскивать за пределы аккордеона

0 голосов
/ 28 апреля 2012

Ответ Эдвна сработал для меня, но имел неприятный побочный эффект - оставил style = "display: block" на каждом элементе после завершения сортировки, что нарушило макет, который я пытался создать.

Альтернативное решение состоит в том, чтобы переопределить переполнение: автоматический стиль в .ui-accordion и .ui-accordion-content для переполнения: наследовать. Это предотвращает скрытие сортируемой информации при перетаскивании.В моем случае это не привело к каким-либо проблемам с аккордеоном, но, по-видимому, у стиля есть причина, поэтому YMMV.FWIW Я тестировал на Chrome и Firefox.

Обновление : при использовании этого метода есть компромисс.Изменение стиля переполнения может привести к тому, что содержимое сегмента нижнего аккордеона появится ниже объекта аккордеона, когда сегмент расширяется, а верхний сегмент все еще закрывается во время последовательности анимации.Вы можете свести к минимуму влияние, только установив oerflow: наследовать на экземплярах .ui-accordion и .ui-accordion-content, которые необходимо отсортировать и исключить.

...