nestedSortable не обнаруживает элементы после рендеринга html - PullRequest
Новая
       35

nestedSortable не обнаруживает элементы после рендеринга html

0 голосов
/ 27 июня 2019

Если я добавлю кучу элементов во вложенный сортируемый список, по умолчанию они перейдут в корень, и я могу перетаскивать их как обычно.Когда я перетаскиваю родительский элемент, ребенок приходит с ним, как на картинке ниже.enter image description here

Если я сохраню список, используя .nestedSortable('toArray');.Иерархия выглядит идеально.Я сохраняю это как строку json и отправляю как часть формы.Когда я перезагрузить страницу для редактирования.Код перестраивает иерархию точно таким же образом, за исключением того, что они больше не связаны.Если я сразу позвоню .nestedSortable('toArray');, будут выбраны только прямые дочерние элементы корневого элемента, и все дочерние элементы отсутствуют.

Если я пытаюсь перетащить родителя, он отсоединяется от ребенка.Если я перетащу этого потомка обратно в корень, а затем снова сделаю его потомком, функциональность вернется в норму.Похоже, плагин не читает детей.HTML точно такой же, хотя.Нет абсолютно никакой разницы между тем, что я генерирую на стороне сервера после загрузки страницы, и тем, что было раньше.

enter image description here

Вот код, который я использую. 

    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>

1 Ответ

1 голос
/ 27 июня 2019

Нашел проблему. Закрытие </li> предшествовало ребенку <ul>. Перетаскивание вверх и назад исправило это. Я не уверен почему, но firefox удалял двойное закрытие li. У меня был заключительный li после дочернего списка ul, но был также заключительный li перед списком дочерних элементов, и это заставляло его сходить с ума.

...