jQuery嵌套可排序 – 将LI元素移动到所有可用的UL中

我有以下代码，尽管运行相当慢，我觉得。我想要做的是允许< li>在现有的< ul>下自由移动或将它们移动一级。我也想要创建层次结构，所以如果你拖动了< li>在另一个< li>这将创建一个层次结构。我认为在这个意义上，我必须渲染< ul>在每个< li>以防万一。我只想把它限制在2或3级深度。

$("#sort_list").sortable({
  containment: 'parent',axis: 'y',revert: true,opacity: 0.8
});
$(".sub_list").sortable({ 
  containment: 'parent',opacity: 0.8,});
$("#sort_list").disableSelection();

<ul id="sort_list">
  <li>one</li>
  <li>two
    <ul class="sub_list">
    <li>sub one</li>
    <li>sub two</li>
    </ul>
  </li>
  <li>three</li>
  <li>four</li>
</ul>