jQuery Sortables, последовательность элементов - PullRequest
Новая
       20

jQuery Sortables, последовательность элементов

1 голос
/ 19 февраля 2012

У меня есть набор заголовков и разделов в файле HTML5, который использует слайд-тогл, чтобы показать / скрыть содержимое.Кроме того, у меня есть сортируемая настройка, позволяющая сортировать список.Хотя это не совсем неупорядоченный или упорядоченный список.Все это прекрасно работает.

jsFiddle с рабочими переключателями и сортируемыми элементами.

Вы увидите, что нажатие на «заголовок» переключит связанный раздел.Нажатие на «Перетаскивание» переместит элемент в верхнюю часть списка.Перетаскивание нажатием кнопки «Перетаскивание» позволяет сортировать элементы с помощью перетаскивания.

Проблема, с которой я столкнулся, заключается в последовательности нажатия кнопки для перемещения вверх.Я бы хотел, чтобы элемент постепенно исчезал ... prepend ... затем исчезал. Происходит Prepend, fadeOut, затем fadeIn.

Я пытался использовать delay () и stop () безудачи.

Буду признателен за любую помощь.

Хотя весь код приведен в ссылке на скрипку выше, я включил ее здесь, так что вопрос также самодостаточен.

HTML 

<div id="container">
    <div class="listing">

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold1" class="slide">title 1</a></h1>
        </header>

        <section id="hold1" class="eps hidden">
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold2" class="slide">title 2</a></h1>
        </header>

        <section id="hold2" class="eps hidden">
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold3" class="slide">title 3</a></h1>
        </header>

        <section id="hold3" class="eps hidden">
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold4" class="slide">title 4</a></h1>
        </header>

        <section id="hold4" class="eps hidden">
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    </div><!-- //listing -->        
</div>​

CSS 

#container { padding: 30px; }

a.slide {
    display: block;
    font: bold 18px Verdana, sans-serif;
    text-decoration: none;
    color: #f00;}

.shead { 
    background: #eee;
    padding: 5px;
    border: 1px solid #aaa;}

.shead:hover{ 
    display: block;
    background: #aaa;
    -webkit-transition: .3s;}

.hidden { display: none; }

.shead h1 { 
    cursor: pointer; 
    font-weight: bold;
    padding: 8px; 
    text-transform: uppercase;}

.eps {
    background: #aaa;
    border: 1px solid #aaa;
    border-top: none;}

.eps p {
    font-size: 12px;
    padding: 5px 10px;
    background: #eee;
    margin: 1px 0;}

.drag {
    float: right; 
    font-weight: normal;
    cursor: move;
    position: relative;}

.clear { clear: both; }

.place { background: #f00; }
​

jquery 

$("a.slide").click( function() {
    var eplink = $(this).attr("href");
    $(eplink).slideToggle(500, "easeInOutSine");
    return false;
});


$('#container').sortable({
    items: '.item',
    axis: 'y',
    cursor: 'move',
    connectWith: '.shead',
    forceHelperSize: true,
    forcePlaceholderSize: true,
    handle: '.drag',
    placeholder: 'place',
    scroll: true,
    delay: 200,
    tolerance: 'pointer'
    });
    $('.drag').disableSelection();


$('.drag').click(function(event) {
        var stuff = $(this).closest('.item');
        $(stuff)
            .fadeOut(500)
            .prependTo('.listing')
            .fadeIn(500);
    });​

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

1 Ответ

1 голос
/ 19 февраля 2012

Функция fadeOut принимает необязательный параметр обратного вызова, который должен вызываться после завершения анимации.

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

    $(stuff)
        .fadeOut(500, function() {
            $(stuff).prependTo('.listing')
                    .fadeIn(500);
        })

См. это обновление jsFiddle

...