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

第一部分允许您首先将一个元素拖动到一个可排序的div中，这很好。然后我想让这个div也成为可排序的，这样我就可以将新元素（部分）拖入其中

该部分也可以很好地工作，但有时如果您对元素（较暗的元素）进行重新排序，它将不允许您将一个部分放回其中，除非您再次对其进行重新排序，或者尝试将其放在其他元素之一并返回

这很难解释，但这里有一个屏幕：

演示位于：

以下是相关代码：

$(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);
});

$（文档）.ready（函数（）{
$（“#网格”）。可排序({
公差：“指针”，
更新：功能（事件、用户界面）{
如果（$（ui.item）.has（'.close'）。长度==0）{
$（ui.item）.前置（“”）；
}
$（'.partholder'，ui.item）.可排序（{
公差：“指针”，
更新：功能（事件、用户界面）{
如果（$（ui.item）.has（'.close'）。长度==0）
$（ui.item）.前置（“”）；
} 
}); 
}
});
$（“#侧边栏>ul>li.part”）。可拖动({
助手：“克隆”，
连接至便携式：'.零件支架'，
addClasses:false
}); 
$（'.drag元素'）。可拖动({
还原：“无效”，
助手：“克隆”，
connectToSortable:“#网格”，
addClasses:false
});
$（“#更新列表”）。单击（更新列表）；
});

---

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

将元素1拖动到临时区域

将元素2拖动到暂存区域；将其放在元素1之前

在元素1内拖动零件。  ☞ 有时页面会在这里失败。☜ ☣

在元素2中拖动零件

现在将元素2拖到元素1之后

☞ 拖动元素1内的零件；这行不通。☜ ☣

在元素2中拖动一个零件；它将工作，现在元素1再次接受部件

---

似乎你在sortable中发现了一个bug。。。一个潜在的解决方法是在重新订购时重新创建“.part holder”可排序表

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

$(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>');
    });
}

把它放在上面

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

---

这是一个黑客，但嘿，它工作…：）

好，让我们再试一次；我添加了一个“connectWith”选项，然后包装了“.part holder”可排序初始值设定项，这样它就不会在每次网格重新排序时都得到更新

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

$(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>');
    });
}

$（文档）。准备好了吗
(
函数（）
{
$（“#网格”）。可排序
( {
公差：“指针”，
更新：功能（事件、用户界面）
{
如果（$（ui.item）.has（'.close'）。长度==0）
{
$（ui.item）.前置（“”）；
}
});
}
其他的
{
//不要再创造了
}
}
} );
$（“#侧边栏>ul>li.part”）。可拖动
( {
助手：“克隆”，
连接至便携式：'.零件支架'，
addClasses:false
} );
$（'.drag元素'）。可拖动
( {
还原：“无效”，
助手：“克隆”，
connectToSortable:“#网格”，
addClasses:false
} );
$（“#更新列表”）。单击（更新列表）；
}
);
函数updateList（）
{
$（“#当前列表”）.empty（）；
$（“#网格>li”）。每个（函数（索引、值）{
$（“#当前列表”）.append（“
”+$（value.html（）+”）；
});
}

---

通过这些更改，您可以将“部件”添加到“部件支架”中！我确实看到一些断断续续的js错误。。。我不知道它们为什么会出现，但当使用FF 3.6查看时，它们似乎不会干扰页面的操作。我同意Nick p的观点，因为我认为这是一个可排序的错误。排序完成后，正在排序的其他项目将失去排序功能

我补充说

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

以前

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

---

我在Chrome 11、FF3.7和FF4.0B12Pro中使用了它。

该演示相当简洁。不知道它是干什么用的，但和它一起玩很有趣。：）你也应该在这里发布你的代码，至少是相关部分。谢谢！它将用于创建BOM表。黑匣子是起点，工程师将能够拖出不同的部件来创建不同的电路。似乎有一小会儿它会松开右侧

的轨道。部件支架

确实很奇怪。不知道你是否可以在每次分拣大的黑色方块时以某种方式更新网格？这对我不起作用。请看我在上面的问题中添加的复制配方。@brock ic，根据你的配方，我的破解完全是胡闹。。。更新的东西，工作得更好一点…等等，只是尝试了这个地狱的它，它的工作！这个有，另一个没有。非常感谢@如果这不是一个完整的解决方案不幸的是。。。如果您尝试brock的步骤，它将不起作用，因为在该示例中，错误的项将被销毁。是的，我刚刚意识到，我将查看另一个解决方案，看看这是否解决了问题。您正在使用jQuery添加带有内联事件处理程序的元素？当然，这一部分与错误无关？专业提示：在JavaScript中，永远不要在自己的行上加大括号，总有一天会让你明白的。谢谢你迄今为止的帮助，但这在chrome或FF 3.6中对我不起作用。这个解决方案对我来说确实有效。编辑答案，使其更清晰。我会给他几天时间看看OP是否改变了主意。@Brock谢谢你整理了我的答案，我在这里还是很生疏的！对我有用。看起来也更优雅。