jquery - 呈现html后nestedSortable未检测到元素

问题描述

如果我将一堆元素添加到嵌套的可排序列表中，默认情况下它们会转到根目录，我可以正常拖动它们。当我拖动父元素时，子元素会随之而来，如下图所示。

如果我使用.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>

标签： jqueryjquery-ui-sortablenested-sortable

jquery - 呈现html后nestedSortable未检测到元素

问题描述

解决方案

推荐阅读