Jquery Sortable 将父项与其子项一起移动

【问题标题】：Jquery Sortable move the parent item along with its childJquery Sortable 将父项与其子项一起移动
【发布时间】：2011-01-22 07:56:07
【问题描述】：

伙计们，我有一个要求，我在 jquery 中有可排序的项目。但我也希望父项的子项与父项一起移动。例如，当我在浏览器中拖动项 1 时，子项 1、2、3 应与它们一起移动并放下。如果通过 UI 有任何可能性，请告诉我。

<ul>
<li>
<p> item 1</p>
<ul>
  <li>
     Sub item 1 
  </li>
  <li>
     Sub item 2
  </li>
  <li>
     Sub item 3 
  </li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>

【问题讨论】：

标签： jquery-ui jquery-ui-sortable

【解决方案1】：

您可以将class 或id 应用于第一个ul，并且仅将sortable 应用于该无序列表：

HTML：

<ul id="sortable">
    <li>
        <p> item 1</p>
        <ul>
            <li>
                Sub item 1
            </li>
            <li>
                Sub item 2
            </li>
            <li>
                Sub item 3
            </li>
        </ul>
    </li>
    <li>
        <p> item 2</p>
    </li>
</ul>

JavaScript：

$("#sortable").sortable();

这样，内部的uls 是不可排序的。

工作示例：http://jsfiddle.net/andrewwhitaker/Ds7ds/

【讨论】：