jQuery防止一个项目被放入另一个列表

Question

我有两个列表，每个列表都有一个唯一的 ID。我想知道如何防止 parent-parent 列出主要的从删除整个外部部分<div> 到 一个<li> <div>，它已经包含了一个自己的<ul> <li> 列表。此外，占位符也出现在那里。我想知道是否有一种方法可以强制属于第一个列表的项目留在那里，即使它们移动到另一个列表上方，并且在主全局列表中有一个项目。

提前致谢。

编辑：一些代码：

<ul id="main">
      <li>
           <div id="content"><p>Lorem ipsum...</p></div>
      </li>
      <li>
        <div id="Section1">
            <ul id="section-list">
                 <li><div id="item1"><h2>Hello World</h2><li>
                 <li><div id="item2"><h2>Hello World</h2><li>
            </ul>
        </div>
      </li>
   <ul>

jQuery:

$(document).ready(function () {
             $("#main").sortable({
                 connectWith: "#main",
                 placeholder: 'placeholder',
                 forcePlaceholderSize: true,
                 start: function (e, ui) {
                     var elementHeight = ui.item.height();
                     ui.placeholder.height(elementHeight);
                 }
             });

我的代码现在看起来像这样：

<script type="text/javascript">
         $(document).ready(function () {
             $('ul#main').sortable({
                 items: 'li:not(:last-child)',
                 placeholder: 'placeholder',
                 forcePlaceholderSize: true,
                 handle: '.grab-and-move-area',
                 start: function (e, ui) {
                     var elementHeight = ui.item.height();
                     ui.placeholder.height(elementHeight);
                 }
             });
         });
     </script>

编辑：用原始代码添加了最后一个 jsfiddle：

我复制了我所有的原创作品，这里是：http://jsfiddle.net/wt4N8/1/

编辑：有人可以告诉我为什么这不能正常工作吗？谢谢！

Answer 1

我已经删除了你不必要的 html 标记并将你的 ul#main 包装在一个 <div> 这个 div 中，您可以将其中的所有 <ul>s 与 .sortable() 连接在一起。您的占位符显示，您可以将列表项从一个层次结构级别移动到另一个层次结构，包括创建一个新的子列表。

使用 jquery 1.8.3 和 jquery-ui 1.9.2，

html

<div id='sortablediv'>
  <ul id="main">
      <li id="content">
           Lorem ipsum..
      </li>
      <li id="Section1" class='section-head'>Section One
            <ul id="section-list1">
                <li id="item1">Hello World</li>
                <li id="item2">Hello Mars</li>
            </ul>
      </li>
      <li id="Section2" class='section-head'>Section Two
            <ul id="section-list2">
                <li id="item3">Goodbye World</li>
                <li id="item4">Goodbye Mars</li>
            </ul>
      </li>    
   <ul>
</div>

js

$(document).ready(function () {
             $("#sortablediv ul").sortable({
                 connectWith: "#sortablediv ul", //connect all uls with all other uls in #sortablediv
                 placeholder: 'placeholder'
             });
});

http://jsfiddle.net/S3836/18/

参考：http://a.shinynew.me/post/4641524290/jquery-ui-nested-sortables