jQuery UI Sortable добавляет класс перетаскиваемого объекта в заполнитель для определения размера - PullRequest
Новая
       13

jQuery UI Sortable добавляет класс перетаскиваемого объекта в заполнитель для определения размера

2 голосов
/ 19 мая 2011

Я использую сортировку для сортировки различной ширины x высоты и кладки для очистки пустых пространств.Как я могу передать сортируемый класс div в заполнитель, чтобы они были одинакового размера?

В полях есть классы single-single, double-single и т. Д. ... для определения размера.

Пример: http://jsfiddle.net/c3mdigital/fTBbc/17/

Проблема в том, что классы не передаются.Sortable добавляет класс, когда он не распознает параметр-заполнитель, но устанавливает видимость скрытым.

code: 

//The extra ajax stuff is to save the sort order to WordPress menu order.
$(document).ready(function() {
$('#edit').click(function() {

    var itemList = $('.sortable');

    itemList.sortable({

        start: function(event, ui) {

            var plus = ui.item.hasClass('double-single') ? 'double-single' : 'single-single';
            var placeholder = 
            itemList.sortable("option", "placeholder", 'placeholder ' + plus );

        },
                update: function(event, ui) {
                    $('#loading-animation').show(); // Show the animate loading gif while waiting
                    opts = {
                        url: MyAjax.ajaxurl,
                        // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
                        type: 'POST',
                        async: true,
                        cache: false,
                        dataType: 'json',
                        data: {
                            action: 'item_sort',
                            // Tell WordPress how to handle this ajax request
                            order: itemList.sortable('toArray').toString() // Passes ID's of list items in  1,3,2 format
                        },
                        success: function(response) {
                            $('#loading-animation').hide(); // Hide the loading animation
                            return;
                        },
                        error: function(xhr, textStatus, e) { // This can be expanded to provide more information
                            alert(e);
                            // alert('There was an error saving the updates');
                            $('#loading-animation').hide(); // Hide the loading animation
                            return;
                        }
                    };
                    $.ajax(opts);
                }
              });


        });

    $('.sortable').disableSelection();
});

$(function() {
    $('#sort').click(function() {
        $('#sortable1').masonry({
            columnWidth: 325,
            itemSelector: '.ui-state-default'
        });
    });
});

1 Ответ

4 голосов
/ 19 мая 2011

Вы не можете сделать это в событии create, которое срабатывает всякий раз, когда вы инициализируете сортируемое. Вместо этого вы можете установить placeholder:'placeholder' и использовать событие start, чтобы добавить дополнительный класс к ui.placeholder, чтобы сделать его подходящим размером: 

    itemList.sortable({
        placeholder: 'placeholder',
        start: function(event, ui) {
            var plus;
            if(ui.item.hasClass('single-single')) plus = 'single-single'; else
            if(ui.item.hasClass('single-double')) plus = 'single-double'; else
            if(ui.item.hasClass('single-triple')) plus = 'single-triple'; else
            if(ui.item.hasClass('double-single')) plus = 'double-single'; else
            if(ui.item.hasClass('double-double')) plus = 'double-double'; else
            if(ui.item.hasClass('double-triple')) plus = 'double-triple'; else
                 plus = 'single-single';
            ui.placeholder.addClass(plus);
        }});

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

Вот демоверсия: http://jsfiddle.net/fTBbc/24/

...