Javascript jQuery嵌套排序表-Can'；不移动嵌套的LI元素

我被难住了。我已经试着解决这个问题两天了，我在网上到处寻找，包括这个网站。这是非常令人沮丧的，如果你能解决它，我会留下深刻的印象

我正在使用Interspire购物车，它使用jQuery插件nestedsortables(http://code.google.com/p/nestedsortables/wiki/NestedSortableDocumentation)通过拖放在管理面板中排列页面顺序。下面是一个不同脚本的演示，该脚本执行相同的操作：

问题是父页面（在列表中，而不是实际页面）可以按任何顺序拖动，包括拖动到嵌套的子位置并返回（直到刷新，然后它被卡在子位置）。无法拖动/移动子页面，光标将变为4向箭头，就像父页面一样

我已经看了很多次HTML，我都数不清了。对于父母和孩子来说，HTML看起来几乎是一样的，我可以理解为什么一个可以工作，而另一个不能。我认为这可能与ul或li标签有关，但我不认为有什么问题

我已经将我的代码与Interspire演示的代码进行了比较(http://shoppingcart.interspire-demo.com/demos)我看不出有什么不同。他们的管理面板工作，我的不行。我尝试重新上传控制此功能的2个JavaScript文件，但问题仍然存在

以下是一个HTML片段：

<table class="GridPanel SortablePanel" cellspacing="0" cellpadding="0" border="0" style="width: 100%; margin-top: 10px;">
<tbody>
<tr class="Heading3">
<td width="1" style="padding-left: 5px;">
<input type="checkbox" style="vertical-align: middle;" onclick="ToggleDeleteBoxes(this.checked)">
</td>
<td> Page Name &nbsp; </td>
<td width="120"> Page Type &nbsp; </td>
<td width="80" align="center"> Visible &nbsp; </td>
<td width="80"> Action </td>
</tr>
</tbody>
</table>
<ul id="PageList" class="SortableList">
<li id="ele-5" class="SortableRow"></li> << **collapsed**
<li id="ele-3" class="SortableRow"></li> << **collapsed**
<li id="ele-11" class="SortableRow">
<table class="GridPanel" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tbody>
<tr class="GridRow" onmouseout="this.className='GridRow'" onmouseover="this.className='GridRowOver'">
<td width="1">
<input type="checkbox" value="11" name="page[]">
</td>
<td width="150" style="display: none;"> </td>
<td class="DragMouseDown sort-handle " style="-moz-user-select: none;"> PARENT </td>
<td class="HideOnDrag " width="120">Normal Page</td>
<td class="HideOnDrag " width="80" align="center">
<a href="index.php?ToDo=editPageVisibility&pageId=11&visible=1" title="Click here to make this page visible on your web site">
<img border="0" src="images/cross.gif">
</a>
</td>
<td class="HideOnDrag" width="80">
<a href="javascript:PreviewPage(11)" title="Preview Page">Preview</a>
<a href="index.php?ToDo=editPage&pageId=11" title="Edit this page">Edit</a>
</td>
</tr>
</tbody>
</table>
<ul class="SortableList" style="padding-left: 30px; padding-right: 0px;">
<li id="ele-12" class="SortableRow">
<table class="GridPanel" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tbody>
<tr class="GridRow" onmouseout="this.className='GridRow'" onmouseover="this.className='GridRowOver'">
<td width="1">
<input type="checkbox" value="12" name="page[]">
</td>
<td width="150" style="display: none;"> </td>
<td class="DragMouseDown sort-handle " style="-moz-user-select: none;"> CHILD ONE </td>
<td class="HideOnDrag " width="120">Normal Page</td>
<td class="HideOnDrag " width="80" align="center">
<a href="index.php?ToDo=editPageVisibility&pageId=12&visible=1" title="Click here to make this page visible on your web site">
<img border="0" src="images/cross.gif">
</a>
</td>
<td class="HideOnDrag" width="80">
<a href="javascript:PreviewPage(12)" title="Preview Page">Preview</a>
<a href="index.php?ToDo=editPage&pageId=12" title="Edit this page">Edit</a>
</td>
</tr>
</tbody>
</table>
</li>
<li id="ele-13" class="SortableRow">
<table class="GridPanel" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tbody>
<tr class="GridRow" onmouseout="this.className='GridRow'" onmouseover="this.className='GridRowOver'">
<td width="1">
<input type="checkbox" value="13" name="page[]">
</td>
<td width="150" style="display: none;"> </td>
<td class="DragMouseDown sort-handle " style="-moz-user-select: none;"> CHILD TWO </td>
<td class="HideOnDrag " width="120">Normal Page</td>
<td class="HideOnDrag " width="80" align="center">
<a href="index.php?ToDo=editPageVisibility&pageId=13&visible=1" title="Click here to make this page visible on your web site">
<img border="0" src="images/cross.gif">
</a>
</td>
<td class="HideOnDrag" width="80">
<a href="javascript:PreviewPage(13)" title="Preview Page">Preview</a>
<a href="index.php?ToDo=editPage&pageId=13" title="Edit this page">Edit</a>
</td>
</tr>
</tbody>
</table>
</li>
</ul>
</li>
</ul>
</div>
<div id="div1" style="display: none;">
</div>
</td>
</tr>
</tbody>
</table>

页面名称
页面类型
看得见的
行动

-a）{
滚动窗口（0，b）
}
if（c.y-d.t0）{
h+='&'
}
h+=s+j+'['+i+'][id]='+a；
g[i]={
身份证号码：a
};
var b=jQuery（this）.children（e.nestedSortCfg.nestingTag+“+e.nestedSortCfg.nestingtaglass.split（“”）.join（“”）.get（0）；
var c=j；
j+='['+i+'][儿童]；
var d=k（b）；
如果（d.长度>0）{
g[i].儿童=d
}
j=c
});
返回g
};
若有(s){
if（jQuery.iSort.collected[s]）{
e=jQuery（'#'+s）.get（0）；
o[s]=k（e）
}否则{
对于（s中的a）{
if（jQuery.iSort.collected[s[a]]）{
e=jQuery（“#”+s[a]）.get（0）；
o[s[a]]=k（e）
}
}
}
}否则{
for（jQuery.iSort.collected中的i）{
e=jQuery（'#'+i）.get（0）；
o[i]=k（e）
}
}
返回{
哈希：h，
o:o
}
},
FindReceidingItem:函数（e）{
var d=0；
var f=jQuery.grep（e.dropCfg.el，函数（i）{
变量a=（i.pos.yd）；
如果（！a）{
返回错误
}
var b；
如果（如nestedSortCfg.rightToLeft）{
b=（i.pos.x+i.pos.wb+e.nestedSortCfg.snapTolerance>jQuery.iDrag.dragg.draggfg.nx+jQuery.iDrag.draggfg.oC.wb）
}否则{
b=（i.pos.x-e.nestedSortCfg.snapTolerance0）{
返回f[（f.length-1）]
}否则{
返回空
}
},
IsTouchFirstItem:函数（e）{
var c；
var d=jQuery.grep（e.dropCfg.el，函数（i）{
变量a=（c==未定义的i.pos.y0）{
d=d[（d.长度-1）]；
返回d.pos.yjQuery.iNestedSortable = {
    checkHover: function (e, o) {
        if (e.isNestedSortable) {
            jQuery.iNestedSortable.scroll(e);
            return jQuery.iNestedSortable.newCheckHover(e)
        } else {
            return jQuery.iNestedSortable.oldCheckHover(e, o)
        }
    },
    oldCheckHover: jQuery.iSort.checkhover,
    newCheckHover: function (e) {
        if (!jQuery.iDrag.dragged) {
            return
        }
        if (!(e.dropCfg.el.size() > 0)) {
            return
        }
        if (!e.nestedSortCfg.remeasured) {
            jQuery.iSort.measure(e);
            e.nestedSortCfg.remeasured = true
        }
        var a = jQuery.iNestedSortable.findPrecedingItem(e);
        var b = jQuery.iNestedSortable.shouldNestItem(e, a);
        var c = (!a) ? jQuery.iNestedSortable.isTouchingFirstItem(e) : false;
        var d = false;
        if (a) {
            if (e.nestedSortCfg.lastPrecedingItem === a && e.nestedSortCfg.lastShouldNest === b) {
                d = true
            }
        } else if (e.nestedSortCfg.lastPrecedingItem === a && e.nestedSortCfg.lastTouchingFirst === c) {
            d = true
        }
        e.nestedSortCfg.lastPrecedingItem = a;
        e.nestedSortCfg.lastShouldNest = b;
        e.nestedSortCfg.lastTouchingFirst = c;
        if (d) {
            return
        }
        if (a !== null) {
            if (b) {
                jQuery.iNestedSortable.nestItem(e, a)
            } else {
                jQuery.iNestedSortable.appendItem(e, a)
            }
        } else if (c) {
            jQuery.iNestedSortable.insertOnTop(e)
        }
    },
    scroll: function (e) {
        if (!e.nestedSortCfg.autoScroll) {
            return false
        }
        var a = e.nestedSortCfg.scrollSensitivity;
        var b = e.nestedSortCfg.scrollSpeed;
        var c = jQuery.iDrag.dragged.dragCfg.currentPointer;
        var d = jQuery.iUtil.getScroll();
        if ((c.y - d.ih) - d.t > -a) {
            window.scrollBy(0, b)
        }
        if (c.y - d.t < a) {
            window.scrollBy(0, -b)
        }
    },
    check: function (a) {
        jQuery.iNestedSortable.newCheck(a);
        return jQuery.iNestedSortable.oldCheck(a)
    },
    oldCheck: jQuery.iSort.check,
    newCheck: function (a) {
        if (jQuery.iNestedSortable.latestNestingClass && jQuery.iNestedSortable.currentNesting) {
            jQuery.iNestedSortable.currentNesting.removeClass(jQuery.iNestedSortable.latestNestingClass);
            jQuery.iNestedSortable.currentNesting = null;
            jQuery.iNestedSortable.latestNestingClass = ""
        }
        if (jQuery.iDrop.overzone.isNestedSortable) {
            jQuery.iDrop.overzone.nestedSortCfg.remeasured = false
        }
    },
    serialize: function (s) {
        if (jQuery('#' + s).get(0).isNestedSortable) {
            return jQuery.iNestedSortable.newSerialize(s)
        } else {
            return jQuery.iNestedSortable.oldSerialize(s)
        }
    },
    oldSerialize: jQuery.iSort.serialize,
    newSerialize: function (s) {
        var i;
        var h = '';
        var j = '';
        var o = {};
        var e;
        var k = function (f) {
                var g = [];
                thisChildren = jQuery(f).children('.' + jQuery.iSort.collected[s]);
                thisChildren.each(function (i) {
                    var a = jQuery.attr(this, 'id');
                    if (a && a.match) {
                        a = a.match(e.nestedSortCfg.serializeRegExp)[0]
                    }
                    if (h.length > 0) {
                        h += '&'
                    }
                    h += s + j + '[' + i + '][id]=' + a;
                    g[i] = {
                        id: a
                    };
                    var b = jQuery(this).children(e.nestedSortCfg.nestingTag + "." + e.nestedSortCfg.nestingTagClass.split(" ").join(".")).get(0);
                    var c = j;
                    j += '[' + i + '][children]';
                    var d = k(b);
                    if (d.length > 0) {
                        g[i].children = d
                    }
                    j = c
                });
                return g
            };
        if (s) {
            if (jQuery.iSort.collected[s]) {
                e = jQuery('#' + s).get(0);
                o[s] = k(e)
            } else {
                for (a in s) {
                    if (jQuery.iSort.collected[s[a]]) {
                        e = jQuery('#' + s[a]).get(0);
                        o[s[a]] = k(e)
                    }
                }
            }
        } else {
            for (i in jQuery.iSort.collected) {
                e = jQuery('#' + i).get(0);
                o[i] = k(e)
            }
        }
        return {
            hash: h,
            o: o
        }
    },
    findPrecedingItem: function (e) {
        var d = 0;
        var f = jQuery.grep(e.dropCfg.el, function (i) {
            var a = (i.pos.y < jQuery.iDrag.dragged.dragCfg.ny) && (i.pos.y > d);
            if (!a) {
                return false
            }
            var b;
            if (e.nestedSortCfg.rightToLeft) {
                b = (i.pos.x + i.pos.wb + e.nestedSortCfg.snapTolerance > jQuery.iDrag.dragged.dragCfg.nx + jQuery.iDrag.dragged.dragCfg.oC.wb)
            } else {
                b = (i.pos.x - e.nestedSortCfg.snapTolerance < jQuery.iDrag.dragged.dragCfg.nx)
            }
            if (!b) {
                return false
            }
            var c = jQuery.iNestedSortable.isBeingDragged(e, i);
            if (c) {
                return false
            }
            d = i.pos.y;
            return true
        });
        if (f.length > 0) {
            return f[(f.length - 1)]
        } else {
            return null
        }
    },
    isTouchingFirstItem: function (e) {
        var c;
        var d = jQuery.grep(e.dropCfg.el, function (i) {
            var a = (c === undefined || i.pos.y < c);
            if (!a) {
                return false
            }
            var b = jQuery.iNestedSortable.isBeingDragged(e, i);
            if (b) {
                return false
            }
            c = i.pos.y;
            return true
        });
        if (d.length > 0) {
            d = d[(d.length - 1)];
            return d.pos.y < jQuery.iDrag.dragged.dragCfg.ny + jQuery.iDrag.dragged.dragCfg.oC.hb && d.pos.y > jQuery.iDrag.dragged.dragCfg.ny
        } else {
            return false
        }
    },
    isBeingDragged: function (e, a) {
        var b = jQuery.iDrag.dragged;
        if (!b) {
            return false
        }
        if (a == b) {
            return true
        }
        if (jQuery(a).parents("." + e.sortCfg.accept.split(" ").join(".")).filter(function () {
            return this == b
        }).length !== 0) {
            return true
        } else {
            return false
        }
    },
    shouldNestItem: function (e, a) {
        if (!a) {
            return false
        }
        if (e.nestedSortCfg.noNestingClass && jQuery(a).filter("." + e.nestedSortCfg.noNestingClass).get(0) === a) {
            return false
        }
        if (e.nestedSortCfg.rightToLeft) {
            return a.pos.x + a.pos.wb - (e.nestedSortCfg.nestingPxSpace - e.nestedSortCfg.snapTolerance) > jQuery.iDrag.dragged.dragCfg.nx + jQuery.iDrag.dragged.dragCfg.oC.wb
        } else {
            return a.pos.x + (e.nestedSortCfg.nestingPxSpace - e.nestedSortCfg.snapTolerance) < jQuery.iDrag.dragged.dragCfg.nx
        }
    },
    nestItem: function (e, a) {
        var b = jQuery(a).children(e.nestedSortCfg.nestingTag + "." + e.nestedSortCfg.nestingTagClass.split(" ").join("."));
        var c = jQuery.iSort.helper;
        styleHelper = c.get(0).style;
        styleHelper.width = 'auto';
        if (!b.size()) {
            var d = "<" + e.nestedSortCfg.nestingTag + " class='" + e.nestedSortCfg.nestingTagClass + "'></" + e.nestedSortCfg.nestingTag + ">";
            b = jQuery(a).append(d).children(e.nestedSortCfg.nestingTag).css(e.nestedSortCfg.styleToAttach)
        }
        jQuery.iNestedSortable.updateCurrentNestingClass(e, b);
        jQuery.iNestedSortable.beforeHelperRemove(e);
        b.prepend(c.get(0));
        jQuery.iNestedSortable.afterHelperInsert(e)
    },
    appendItem: function (e, a) {
        jQuery.iNestedSortable.updateCurrentNestingClass(e, jQuery(a).parent());
        jQuery.iNestedSortable.beforeHelperRemove(e);
        jQuery(a).after(jQuery.iSort.helper.get(0));
        jQuery.iNestedSortable.afterHelperInsert(e)
    },
    insertOnTop: function (e) {
        jQuery.iNestedSortable.updateCurrentNestingClass(e, e);
        jQuery.iNestedSortable.beforeHelperRemove(e);
        jQuery(e).prepend(jQuery.iSort.helper.get(0));
        jQuery.iNestedSortable.afterHelperInsert(e)
    },
    beforeHelperRemove: function (e) {
        var a = jQuery.iSort.helper.parent(e.nestedSortCfg.nestingTag + "." + e.nestedSortCfg.nestingTagClass.split(" ").join("."));
        var b = a.children("." + e.sortCfg.accept.split(" ").join(".") + ":visible").size();
        if (b === 0 && a.get(0) !== e) {
            a.hide()
        }
    },
    afterHelperInsert: function (e) {
        var a = jQuery.iSort.helper.parent();
        if (a.get(0) !== e) {
            a.show()
        }
        e.nestedSortCfg.remeasured = false
    },
    updateCurrentNestingClass: function (e, a) {
        var b = jQuery(a);
        if ((e.nestedSortCfg.currentNestingClass) && (!jQuery.iNestedSortable.currentNesting || b.get(0) != jQuery.iNestedSortable.currentNesting.get(0))) {
            if (jQuery.iNestedSortable.currentNesting) {
                jQuery.iNestedSortable.currentNesting.removeClass(e.nestedSortCfg.currentNestingClass)
            }
            if (b.get(0) != e) {
                jQuery.iNestedSortable.currentNesting = b;
                b.addClass(e.nestedSortCfg.currentNestingClass);
                jQuery.iNestedSortable.latestNestingClass = e.nestedSortCfg.currentNestingClass
            } else {
                jQuery.iNestedSortable.currentNesting = null;
                jQuery.iNestedSortable.latestNestingClass = ""
            }
        }
    },
    destroy: function () {
        return this.each(function () {
            if (this.isNestedSortable) {
                this.nestedSortCfg = null;
                this.isNestedSortable = null;
                jQuery(this).SortableDestroy()
            }
        })
    },
    build: function (a) {
        if (a.accept && jQuery.iUtil && jQuery.iDrag && jQuery.iDrop && jQuery.iSort) {
            this.each(function () {
                this.isNestedSortable = true;
                this.nestedSortCfg = {
                    noNestingClass: a.noNestingClass ? a.noNestingClass : false,
                    rightToLeft: a.rightToLeft ? true : false,
                    nestingPxSpace: parseInt(a.nestingPxSpace, 10) || 30,
                    currentNestingClass: a.currentNestingClass ? a.currentNestingClass : "",
                    nestingLimit: a.nestingLimit ? a.nestingLimit : false,
                    autoScroll: a.autoScroll !== undefined ? a.autoScroll == true : true,
                    scrollSensitivity: a.scrollSensitivity ? a.scrollSensitivity : 20,
                    scrollSpeed: a.scrollSpeed ? a.scrollSpeed : 20,
                    serializeRegExp: a.serializeRegExp ? a.serializeRegExp : /[^\-]*$/
                };
                this.nestedSortCfg.snapTolerance = parseInt(this.nestedSortCfg.nestingPxSpace * 0.4, 10);
                this.nestedSortCfg.nestingTag = this.tagName;
                this.nestedSortCfg.nestingTagClass = this.className;
                this.nestedSortCfg.styleToAttach = (this.nestedSortCfg.rightToLeft) ? {
                    "padding-left": 0,
                    "padding-right": this.nestedSortCfg.nestingPxSpace + 'px'
                } : {
                    "padding-left": this.nestedSortCfg.nestingPxSpace + 'px',
                    "padding-right": 0
                };
                jQuery(this.nestedSortCfg.nestingTag, this).css(this.nestedSortCfg.styleToAttach)
            });
            jQuery.iSort.checkhover = jQuery.iNestedSortable.checkHover;
            jQuery.iSort.check = jQuery.iNestedSortable.check;
            jQuery.iSort.serialize = jQuery.iNestedSortable.serialize
        }
        return this.Sortable(a)
    }
};
jQuery.fn.extend({
    NestedSortable: jQuery.iNestedSortable.build,
    NestedSortableDestroy: jQuery.iNestedSortable.destroy
});
jQuery.iUtil.getScroll = function (e) {
    var t, l, w, h, iw, ih;
    if (e && e.nodeName.toLowerCase() != 'body') {
        t = e.scrollTop;
        l = e.scrollLeft;
        w = e.scrollWidth;
        h = e.scrollHeight;
        iw = 0;
        ih = 0
    } else {
        if (document.documentElement && document.documentElement.scrollTop) {
            t = document.documentElement.scrollTop;
            l = document.documentElement.scrollLeft;
            w = document.documentElement.scrollWidth;
            h = document.documentElement.scrollHeight
        } else if (document.body) {
            t = document.body.scrollTop;
            l = document.body.scrollLeft;
            w = document.body.scrollWidth;
            h = document.body.scrollHeight
        }
        iw = self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
        ih = self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    }
    return {
        t: t,
        l: l,
        w: w,
        h: h,
        iw: iw,
        ih: ih
    }