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