如何调试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中拖动零件.☞有时页面会在这里失败.☜☣

4. 在元素2中拖动零件.

5. 现在将元素2拖动到元素1之后.

6. ☞ 在元素1中拖动零件 ; 它不会起作用.☜☣

7. 在Element 2中拖动一个Part ; 它会工作,现在Element 1再次接受部件.

Answer 1

好吧，让我们再试一次；我添加了一个“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查看时它们似乎不会干扰页面的操作