Question

第一部分允许您先将元素拖动到可排序的div中，这样可以正常工作。然后我想让div变得可以排序，所以我可以将新元素（部分）拖到那些中。

那个部分也可以正常工作，除非有时候你重新排序元素（颜色较深的部分）它不会让你把一部分放回去，直到你再次重新排序它们，或者尝试把它放在其他元素之一和回到它。

这很难解释，但这是一个屏幕投射：http://screencast.com/t/Ls2ksVY4Q

以下是相关代码：

$(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 拖到暂存区域。
将元素2 拖到暂存区域;把它放在元素1之前。
在元素1 中拖动 Part 。 ☞有时页面会在这里失败。 ☜☣
在元素2 中拖动部分。
现在将元素2 拖到元素1 之后。
☞在元素1 中拖动 Part ;它不会起作用。 ☜☣
在 Element 2 中拖动 Part ;它会工作，现在 Element 1 再次接受部件。

Answer 1

我同意Nick P的观点，我认为这是一个可排序的错误。排序完成后，其他正在排序的项目将失去排序功能。

我添加了

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

前

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

在Chrome 11，FF3.7和FF4.0b12pre中为我工作。

Answer 2

似乎你已经发现了一个可排序的错误...一个潜在的解决方法是在重新订购时重新创建'.part-holder'可排序......

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

把它放在

之上

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

这是一个黑客攻击，但是嘿它有效...... :)

Answer 3

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

如何调试jQuery嵌套的可排序可拖动元素？

似乎复制问题的配方（在FF 3.6中）：

3 个答案: