Question

如果我将一堆元素添加到嵌套的可排序列表中，则默认情况下它们会进入根目录，我可以像往常一样拖动它们。当我拖动一个父元素时，子元素随之出现，如下图所示。

如果我使用.nestedSortable('toArray');保存列表。层次结构看起来很完美。我将其保存为json字符串，并将其作为表单的一部分提交。当我重新加载页面进行编辑时。该代码以完全相同的方式重建层次结构，只是不再连接它们。如果我立即调用.nestedSortable('toArray');，则只会拾取根元素的直接子代，而所有子代都将丢失。

如果我尝试拖动父级，它将与子级分离。如果我将该孩子拖回根目录，然后再次使其成为孩子，则功能将恢复正常。似乎该插件没有读取子项。 HTML完全一样。页面加载后生成服务器端与之前的内容完全没有区别。

这是我正在使用的代码。

    var ns = jQuery('#wikiheirarchy').nestedSortable({
        forcePlaceholderSize: true,
        items: 'li',
        handle: 'div.inner',
        tolerance: 'pointer',
        toleranceElement: '> div',
        listType: 'ul',
        maxLevels: 6,
        opacity: .6,
        tabSize : 20,
        update: function () {
            //DO STUFF                  
        }
    });

这是服务器端代码生成供插件使用的内容。

<ul id="wikiheirarchy" class="sortable ui-sortable mjs-nestedSortable-branch mjs-nestedSortable-expanded">
    <li id="wikirecord_2">
        <div class="inner">
            <strong>Title: </strong>Sample Page<br>
                <strong>Url: </strong>http://localhost:8080/wordpress/sample-page/<div>
                    <a href="javascript:removeWikiPost(2)">Delete</a>
                </div>
        </div>
    </li>
    <ul>
        <li id="wikirecord_1">
            <div class="inner">
                <strong>Title: </strong>Hello world!<br>
                    <strong>Url: </strong>http://localhost:8080/wordpress/2019/04/08/hello-world/<div>
                        <a href="javascript:removeWikiPost(1)">Delete</a>
                    </div>
            </div>
        </li>
    </ul>
    <li id="wikirecord_8">
        <div class="inner">
            <strong>Title: </strong>test ahvsdas sasfdsdcfghf<br>
                <strong>Url: </strong>http://localhost:8080/wordpress/2019/06/11/test-ahvsdas-sasfdsdcfghf/<div>
                    <a href="javascript:removeWikiPost(8)">Delete</a>
                </div>
        </div>
    </li>
    <li id="wikirecord_78">
        <div class="inner">
            <strong>Title: </strong>Test<br>
                <strong>Url: </strong>http://localhost:8080/wordpress/2019/06/27/test/<div>
                    <a href="javascript:removeWikiPost(78)">Delete</a>
                </div>
        </div>
    </li>
</ul>

Answer 1

发现了问题。结帐</li>在孩子<ul>之前。向上拖动并向后拖动可解决此问题。我不确定为什么，但是Firefox删除了双结束符。在孩子ul之后，我有一个结账李，但是在孩子列表之前还有一个结账李，这就是让它发疯的原因。

呈现HTML之后，nestedSortable无法检测元素

1 个答案: