jquery - 如何使由 javascript 创建的列表项可排序？

Question

<script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>


<div class="demo">

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div><!-- End demo -->

我想通过 ajax 将另一个项目附加到列表后使列表可排序，我该怎么做？

Answer 1

在 ajax 中添加新列表项后，success: function() {...}您可以尝试：

$( "#sortable" ).sortable('destroy').sortable().disableSelection();

例如：

$.ajax({
  url: '',
  type: '',
  success: function() {
    // all codes to append new list items
    // then add following line

    $( "#sortable" ).sortable('destroy').sortable().disableSelection();

    // do something else if need
  }
});