jQuery多个嵌套的可排序列表 - 如何添加另一个列表以使其可排序

Question

寻求关于如何最好地执行以下操作的一些建议：

我有3个列表项，可以在彼此之间进行排序，前两个有一个内部列表，每个列表都有可以订购的项目，以及拖入不同的内部列表。

当我将内部列表动态添加到第3个外部列表项时，可排序元素不适用于新的附加列表。

以下是一些代码：

<ul id="outer_list">
  <li>
    <span class="handle"></span> List 1
    <ul class="inner_list">
      <li><span class="handle"></span> Title</li>
      <li><span class="handle"></span> Title</li>
    </ul>
  </li>

  <li>
    <span class="handle"></span> List 1
    <ul class="inner_list">
      <li><span class="handle"></span> Title</li>
      <li><span class="handle"></span> Title</li>
    </ul>
  </li>

  <li>
    <span class="handle"></span> List 1
  </li>
</ul>

使用Javascript：

// Outer lists
$( '#outer_list' ).sortable({
  handle: '.handle'
});


// Inner lists lists
var inner_list = $( '.inner_list' ).sortable({
  handle: '.handle',
  connectWith: '.inner_list'
});

我尝试过以下操作，但没有运气。

  inner_list.sortable( 'refresh' );

有人能指出我正确的方向吗？

由于