jQuery сортируемый аккордеон без стандартных обработчиков - PullRequest
Новая
       16

jQuery сортируемый аккордеон без стандартных обработчиков

1 голос
/ 17 августа 2011

В настоящее время я работаю над веб-приложением, в котором динамически обновляется аккордеон внутри jScrollPane.

Я сейчас пытаюсь реализовать jQuery Sortable без удачи.

В настоящее время я нашел примеры, которые требуют от вас поменять теги заголовка аккордеона на "> div> h3" ... где тогдаОбработчик sortable - это тег h3.

При сохранении оригинальных заголовков аккордеона и попытке сделать сортируемую работу я не могу найти никакого решения.

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

Есть ли у кого-нибудь какие-либо идеи по созданиюэта работа?

Спасибо,

Дэвид

РЕДАКТИРОВАТЬ: Вот пример кода, который я пытался сделать работу.Я убрал опцию заголовка в аккордеоне и поиграл с сортируемым обработчиком и действием щелчка. 

    var stop = false;
    $("#accordion h3").click(function(event) {
        if (stop) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });

    $("#accordion").accordion().sortable({
        axis: "y",
        handle: "h3",
        stop: function() {
            stop = true;
        }
    });

1 Ответ

1 голос
/ 23 августа 2011

Существует два основных различия между вашим кодом (включая то, что у вас есть в ссылке jsfiddle.net) и стандартным примером на сайте jQuery. Во-первых (и, вероятно, что вас сбивает с толку), каждый "участник" аккордеона заключен в свой собственный div То есть, где у вас есть div, обозначенный как контейнер для аккордеона, а затем h3, div, h3, div ..., вам нужен контейнер для аккордеона и контейнер для каждого члена (поэтому div для аккордеона div> member > h3 / content div).

Параметр заголовка в примере описывает структуру, которую я описал. Однако, если вы измените структуру и пропустите контейнер (который, я считаю, sortable должен определить, что следует перетаскивать), ваш аккордеон, вероятно, все еще работает, но теперь не может быть отсортирован.

Вот нормальный рабочий пример . HTML: 

<div id="accordion">
    <div>
        <h3><a href="#">Section 1</a></h3>
        <div>
            <p>
                Text.
            </p>
        </div>
    </div>
    <div>
        <h3><a href="#">Section 2</a></h3>
        <div>
            <p>
                Text.
            </p>
        </div>
    </div>
    <div>
        <h3><a href="#">Section 3</a></h3>
        <div>
            <p>
                Text.
            </p>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </div>
    </div>
    <div>
        <h3><a href="#">Section 4</a></h3>
        <div>
            <p>
                Text.
            </p>
            <p>
                Text.
            </p>
        </div>
    </div>
</div>

JS: 

var stop = false;
$("#accordion h3").click(function(event) {
    if (stop) {
        event.stopImmediatePropagation();
        event.preventDefault();
        stop = false;
    }
});
$("#accordion").accordion({
    header: "> div > h3"
    })
    .sortable({
    axis: "y",
    handle: "h3",
    stop: function() {
        stop = true;
    }
});

Если вы измените структуру сейчас (оставляя в "контейнерах для аккордеона" для сортировки), она должна работать нормально. В этом примере я удалил теги h3 и сделал привязки внутри триггерного элемента гармошки. Я также дал элементам триггера отдельный класс «handle», чтобы отличать их от любых якорей внутри членов (несомненно, есть лучший способ использовать селекторы jQuery для этого, но я ржавый и ленивый): 

<div id="accordion">
    <div>
        <a href="#" class="handle">Section 1</a>
        <div>
            <p>
                Text...
            </p>
        </div>
    </div>
    ...
</div>

Затем я изменил JS, чтобы отразить это. Настройки аккордеона обозначают путь (после необходимого контейнера div) к тегу привязки. Настройки сортировки используют наш специальный «a.handle», поэтому только метки привязки класса «handle» будут действовать как дескриптор сортировки: 

var stop = false;
$("#accordion h3").click(function(event) {
    if (stop) {
        event.stopImmediatePropagation();
        event.preventDefault();
        stop = false;
    }
});
$("#accordion").accordion({
    header: "> div > a"
    })
    .sortable({
    axis: "y",
    handle: "a.handle",
    stop: function() {
        stop = true;
    }
});

Надеюсь, это поможет.

...