0

我有两个列表，每个列表都有一个唯一的 ID。我想知道如何防止父父列表主列表将整个外部部分<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/ <-- 将摘要拖到书籍部分，你会看到

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

4

1 回答 1

0

我已经删除了您不必要的 html 标记，并将您包装ul#main在一个<div>This 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

于 2013-03-11T14:09:44.417 回答