Как отладить вложенный сортируемый перетаскиваемый элемент jQuery?

Question

Первая часть позволяет вам перетащить элемент в сортируемый элемент div, который работает нормально. Затем я хочу, чтобы этот div также стал сортируемым, чтобы я мог перетаскивать в него новые элементы (части).

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

Это сложно объяснить, но вот скриншот: http://screencast.com/t/Ls2ksVY4Q

Демо находится по адресу: http://jsfiddle.net/9MXWp/

Вот соответствующий код:

$(document).ready(function() {
    $('#the-grid').sortable({
        tolerance: 'pointer',
        update: function(event, ui) {
            if( $(ui.item).has('.close').length == 0 ) {
                $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>');
            }

            $('.part-holder', ui.item).sortable({ 
                tolerance: 'pointer',
                update: function(event, ui) {
                    if( $(ui.item).has('.close').length == 0 )
                        $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>');
                } 
            }); 

        }
    });

    $('#sidebar > ul > li.part').draggable({
        helper: 'clone',
        connectToSortable: '.part-holder',
        addClasses: false
    }); 

    $('.drag-element').draggable({
        revert: 'invalid',
        helper: 'clone',
        connectToSortable: '#the-grid',
        addClasses: false
    });

    $('#update-list').click(updateList);
});

---

Рецепт, который, кажется, дублирует проблему (в FF 3.6):

1. Перетащите Элемент 1 в область подготовки.

2. Перетащите Элемент 2 в область подготовки; поместите его перед элементом 1.

3. Перетащите Часть внутрь Элемент 1 . ☞ Иногда страница не работает прямо здесь. 10 ☣

4. Перетащите Деталь внутрь Элемент 2 .

5. Теперь перетащите Элемент 2 , чтобы следовать за Элемент 1 .

6. ☞ Перетащите Деталь внутрь Элемент 1 ; это не сработает. 10 ☣

7. Перетащите Деталь внутрь Элемент 2 ; это сработает, и теперь Элемент 1 снова принимает части.

Answer 1

Я согласен с Ником П в том, что я думаю, что это ошибка в сортируемом.Другие сортируемые элементы теряют способность сортировки по окончании сортировки.

Я добавил

$('.part-holder').sortable('refresh');

до

$('.part-holder', ui.item).sortable({

, что работало для меня в Chrome 11, FF3.7 и FF4.0b12pre.

Answer 2

хорошо, давайте попробуем это снова;я добавил опцию «connectWith», затем обернул сортируемый инициализатор «.part-holder», чтобы он не обновлялся каждый раз, когда сетка переупорядочена ...

$(document).ready
(
    function()
    {
        $('#the-grid').sortable
        ( {
            tolerance:  'pointer',
            update:     function (event, ui)
                        {
                            if( $(ui.item).has('.close').length == 0 )
                            {
                                $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x<\/a>');
                            }

                            if($(ui.item).has('.part-holder.ui-sortable').length == 0)
                            {
                                $('.part-holder', ui.item).sortable({
                                    tolerance: 'pointer',
                                    connectWith: '.part-holder',
                                    update: function(event, ui) {
                                        if( $(ui.item).has('.close').length == 0 )
                                            $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>');
                                    }
                                });
                            }
                            else
                            {
                                // don't recreate
                            }
                        }
        } );

        $('#sidebar > ul > li.part').draggable
        ( {
            helper:             'clone',
            connectToSortable:  '.part-holder',
            addClasses:         false
        } );

        $('.drag-element').draggable
        ( {
            revert:             'invalid',
            helper:             'clone',
            connectToSortable:  '#the-grid',
            addClasses:         false
        } );

        $('#update-list').click (updateList);
    }
);

function updateList()
{
    $('#current-list').empty();

    $('#the-grid > li').each( function(index, value) {
            $('#current-list').append('<li>' + $(value).html() + '<\/li>');
    });
}

с этими изменениями,Вы можете добавить «части» к «частным владельцам»!Я видел некоторые прерывистые ошибки js ... Я не знаю, почему они появляются, но они не влияют на работу страницы при просмотре с FF 3.6

Answer 3

кажется, что вы обнаружили ошибку в сортируемом ... потенциальный обходной путь состоит в том, чтобы воссоздать '.part-holder' сортируемый всякий раз, когда он переупорядочен ...

$('.part-holder', ui.item).sortable('destroy');

поместите это прямо выше

...
$('.part-holder', ui.item).sortable({ 
   ...

это взлом, но эй, это работает ...:)