如何调试jQuery嵌套的可排序的可拖动元素？ [英] How to debug a jQuery nested sortable draggable element?

问题描述

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

The first part allows you to first drag an element into a sortable div, which is working fine. I then want to have that div become sortable as well so I can drag new elements (parts) into those.

该部分也可以正常工作，除非有时候重新排序元素（较暗的）不会让您将其中的一部分重新放入，直到您再次重新排序，或者尝试将其放在其他元素之一并返回。

That part works fine too, except sometimes if you reorder the elements (the darker ones) it wont let you put a part back into it until you either reorder them again, or try and put it in one of the other elements and go back to it.

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

It's kind of hard to explain, but here's a screen-cast: 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

---

Recipe that seems to duplicate the problem (in FF 3.6):

1. 将元素1 拖放到暂存区域。

将元素2 拖放到暂存区域;将它放在元素1之前。

Drag Element 2 to the staging area; place it before element 1.

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

Drag a Part inside Element 1.   ☞ Sometimes the page will fail right here. ☜ ☣

在元素2 之间拖动部分。

现在将元素2 拖入元素1 之后。

☞在元素1 中拖动部分;它不行。 ☜☣

☞ Drag a Part inside Element 1; it won't work. ☜ ☣

在元素2 之间拖动部分它将工作，现在元素1 再次接受零件。

Drag a Part inside Element 2; it will work, and now Element 1 accepts parts again.

推荐答案

好吧，再试一次;我添加了一个'connectWith'选项，然后包装了'.part-holder'可排序的初始化程序，因此每次重新排序网格时都不会更新...

ok lets try this again; i added a 'connectWith' option, then wrapped the '.part-holder' sortable initializer so it doesn't get updated every time the grid is re-ordered...

$(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查看页面的操作。

with those changes, you are able to add the 'parts' to the 'part-holders'! I did see some intermittent js errors... I have no idea why they appear, but they don't seem to interfere with the operation of the page when viewed with FF 3.6

这篇关于如何调试jQuery嵌套的可排序的可拖动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！