Question

我有两个列表，每个列表都有一个唯一的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/＆lt; - 拖动书籍摘要部分，你会看到

编辑：有人可以告诉我为什么这不起作用吗？谢谢！

Answer 1

我已经删除了您不必要的HTML标记，并且我已将ul#main包裹在<div>这个div允许您将<ul>内的所有.sortable()连接在一起<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> {1}}。您的占位符显示，您可以将列表项从一个层次结构移动到另一个层次结构，包括创建新的子列表。

使用jquery 1.8.3和jquery-ui 1.9.2，

HTML

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

JS

{{1}}

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

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

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

1 个答案:

HTML

JS