Подтвердить что ты не робот

JQuery Сортировка с анимацией

Я использую jQuery и Sortable для упорядочивания списка элементов (и http://dragsort.codeplex.com).

Все работает отлично.

Я использую функцию на dragEnd, чтобы упорядочить списки в порядке.

Вот мой код:

$("#list1, #list2").dragsort({ dragSelector: "div",
                               dragBetween: true,
                               dragEnd: saveOrder,
                               placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });

function saveOrder() {
    var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
    $("input[name=list1SortOrder]").val(data.join("|"));
};

Мой вопрос: Есть ли в любом случае, что я могу сделать анимацию, пока я перетаскиваю? Или переместить элементы при перетаскивании? Мне просто нужно, чтобы он работал над Safari.

Вот пример:

http://www.youtube.com/watch?v=U3j7mM_JBNw

Посмотрите на перетаскивание (0:30), и вы увидите, о чем я говорю.

Спасибо.

4b9b3361

ОТВЕТЫ

Ответ 1

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

Итак, я придумал решение, которое, похоже, отлично работает, и я сделаю все возможное, чтобы объяснить это, насколько это возможно. Здесь идет...

Самая большая проблема здесь заключалась в том, чтобы не только анимировать сортировки, но и выяснить, где они нуждаются в анимации - фантастически, когда речь идет о плавающих элементах, таких как изображения в галерее! Чтобы обойти это, я решил .clone() исходные плавающие элементы LI, поместить клоны абсолютно под оригинальные элементы LI, используя значение z-index, которое было меньше, чем исходные элементы LI, а затем, когда событие change, запущенное из сортировки jQuery, я мог обнаружить позицию исходного LI и анимировать абсолютно позиционированные клоны для этих позиций. Остальное было просто показать/скрыть элементы, чтобы получить желаемый эффект.

Здесь код, начиная с HTML:

<ul id="original_items">
    <li><img src="something.jpg" /></li>
    <li><img src="something.jpg" /></li>
    <li><img src="something.jpg" /></li>
</ul>

<ul id="cloned_items">
</ul>

Итак, у нас есть оригинальные элементы, которые мы пытаемся сортировать, и контейнер для клонированных элементов. Время для CSS:

#original_items, #cloned_items {
    list-style: none;
}

#original_items li {
    float: left;
    position: relative;
    z-index: 5;
}

#cloned_items li {
    position: absolute;
    z-index: 1;
}

С помощью нашего CSS мы просто удаляем любой стиль списка, плаваем наши исходные элементы и настраиваем требования z-index, чтобы гарантировать, что клонированные элементы лежат под оригинальными элементами. Обратите внимание на позицию relative на исходных элементах, чтобы убедиться, что они ведут себя так, как ожидалось. Почему ты спрашиваешь? Он (надеюсь) станет ясен с помощью Javascript:

jQuery(function(){

    // loop through the original items...
    jQuery("#original_items li").each(function(){

        // clone the original items to make their
        // absolute-positioned counterparts...
        var item = jQuery(this);
        var item_clone = item.clone();
        // 'store' the clone for later use...
        item.data("clone", item_clone);

        // set the initial position of the clone
        var position = item.position();
        item_clone.css("left", position.left);
        item_clone.css("top", position.top);

        // append the clone...
        jQuery("#cloned_items").append(item_clone);
    });

    // create our sortable as usual...
    // with some event handler extras...
    jQuery("#original_items").sortable({

        // on sorting start, hide the original items...
        // only adjust the visibility, we still need
        // their float positions..!
        start: function(e, ui){
            // loop through the items, except the one we're
            // currently dragging, and hide it...
            ui.helper.addClass("exclude-me");
            jQuery("#original_items li:not(.exclude-me)")
                .css("visibility", "hidden");

            // get the clone that under it and hide it...
            ui.helper.data("clone").hide();
        },

        stop: function(e, ui){
            // get the item we were just dragging, and
            // its clone, and adjust accordingly...
            jQuery("#original_items li.exclude-me").each(function(){
                var item = jQuery(this);
                var clone = item.data("clone");
                var position = item.position();

                // move the clone under the item we've just dropped...
                clone.css("left", position.left);
                clone.css("top", position.top);
                clone.show();

                // remove unnecessary class...
                item.removeClass("exclude-me");
            });

            // make sure all our original items are visible again...
            jQuery("#original_items li").css("visibility", "visible");
        },

        // here where the magic happens...
        change: function(e, ui){
            // get all invisible items that are also not placeholders
            // and process them when ordering changes...
            jQuery("#original_items li:not(.exclude-me, .ui-sortable-placeholder)").each(function(){
                var item = jQuery(this);
                var clone = item.data("clone");

                // stop current clone animations...
                clone.stop(true, false);

                // get the invisible item, which has snapped to a new
                // location, get its position, and animate the visible
                // clone to it...
                var position = item.position();
                clone.animate({
                    left: position.left,
                    top:position.top}, 500);
            });
        }
    });
});

Ничего себе, я действительно надеюсь, что это имеет смысл и помогает кому-то оживить их сортируемые списки, но это рабочий пример для всех, кто интересуется!:)

Ответ 2

Просто объяснил, что сказал Крис Кемпен: http://jsfiddle.net/dNfsJ/

jQuery(function(){

// loop through the original items...
jQuery("#original_items li").each(function(){

    // clone the original items to make their
    // absolute-positioned counterparts...
    var item = jQuery(this);
    var item_clone = item.clone();
    // 'store' the clone for later use...
    item.data("clone", item_clone);

    // set the initial position of the clone
    var position = item.position();
    item_clone.css("left", position.left);
    item_clone.css("top", position.top);

    // append the clone...
    jQuery("#cloned_items").append(item_clone);
});

// create our sortable as usual...
// with some event handler extras...
jQuery("#original_items").sortable({

    // on sorting start, hide the original items...
    // only adjust the visibility, we still need
    // their float positions..!
    start: function(e, ui){
        // loop through the items, except the one we're
        // currently dragging, and hide it...
        ui.helper.addClass("exclude-me");
        jQuery("#original_items li:not(.exclude-me)")
            .css("visibility", "hidden");

        // get the clone that under it and hide it...
        ui.helper.data("clone").hide();
    },

    stop: function(e, ui){
        // get the item we were just dragging, and
        // its clone, and adjust accordingly...
        jQuery("#original_items li.exclude-me").each(function(){
            var item = jQuery(this);
            var clone = item.data("clone");
            var position = item.position();

            // move the clone under the item we've just dropped...
            clone.css("left", position.left);
            clone.css("top", position.top);
            clone.show();

            // remove unnecessary class...
            item.removeClass("exclude-me");
        });

        // make sure all our original items are visible again...
        jQuery("#original_items li").css("visibility", "visible");
    },

    // here where the magic happens...
    change: function(e, ui){
        // get all invisible items that are also not placeholders
        // and process them when ordering changes...
        jQuery("#original_items li:not(.exclude-me, .ui-sortable-placeholder)").each(function(){
            var item = jQuery(this);
            var clone = item.data("clone");

            // stop current clone animations...
            clone.stop(true, false);

            // get the invisible item, which has snapped to a new
            // location, get its position, and animate the visible
            // clone to it...
            var position = item.position();
            clone.animate({
                left: position.left,
                top:position.top}, 500);
        });
    }
});

Ответ 3

Хотя это решение отлично подходит для создания начального перехода, когда элемент отбрасывается назад, переход отсутствует. Решение проще, чем я ожидал. Все, что вам нужно сделать, это настроить параметр вернуть в .sortable()

Вот так:

     <script>
      $(document).ready(function() {
        $( "#sortable" ).sortable({
         tolerance: 'pointer',
         revert: 'invalid'
        }).disableSelection();
      });
     </script>

jQuery API интерфейса: http://api.jqueryui.com/sortable/#option-revert

Это делает приятный и плавный переход к новому дому.

Нажмите здесь для примера на jsFiddle

Ответ 4

Почему вы не использовали Sortable на jqueryui? http://jsfiddle.net/KgNCD/

JS:

$( "#sortable" ).sortable({       
    start: function(e, ui){
        $(ui.placeholder).hide(300);
    },
    change: function (e,ui){
        $(ui.placeholder).hide().show(300);
    }
});                           
$("#sortable").disableSelection();

HTML:

<ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
</ul>

Ответ 5

Из ответа jsfiddle выше (http://jsfiddle.net/KgNCD/2/):

$( "#sortable" ).sortable({       
    start: function(e, ui){
        $(ui.placeholder).hide(300);
    },
    change: function (e,ui){
        $(ui.placeholder).hide().show(300);
    }
});