jQuery ui 可排序：如何在允许所有项目 inter-sortable 的同时禁止组嵌套

Question

我有以下使用 jQuery 的嵌套可排序代码：

HTML:

<div id="listContainer">
  <ul>
    <li class="listItem">Item 1</li>
    <li class="listItem groupItem">
      <ul>
        <div class="groupTitle">Group A</div>
        <li class="listItem">Item 2</li>
        <li class="listItem">Item 3</li>
        <li class="listItem">Item 4</li>
      </ul>
    </li>
    <li class="listItem">Item 5</li>
    <li class="listItem">Item 6</li>
    <li class="listItem groupItem">
      <ul>
        <div class="groupTitle">Group B</div>
        <li class="listItem">Item 7</li>
        <li class="listItem">Item 8</li>
      </ul>
    </li>
    <li class="listItem">Item 9</li>
  </ul>
</div>

JS:

$( "#listContainer ul" ).sortable({
  connectWith: "#listContainer ul",
  placeholder: "itemPlaceholder",
  cursor: 'move'
});

JSFiddle

我目前面临两个问题：

- 如果我拖动组标题，它只会移动标题行，但我想移动整个组。

- 我不想允许组嵌套。目前您可以移动该组并将其嵌套在另一个组中，但只能移动项目。

Answer 1

我已经修改了你的DEMO并创建了一个NEW DEMO。

在此演示中：

• All the items are sortable from outer list to the group list and vice versa and the items can also be sorted among the the groups.
• The groups cannot be nested. An alert will popup if nesting of group is attempted

请注意，要实现此目的，您需要更改列表项的结构，正如您在演示中观察到的那样。

这是演示中的代码：

HTML:

<div id="listContainer">
<ul class="srtable">
  <li class="listItem">Item 1</li>
  <li class="listItem groupItem">
    <div class="group">
      <div class="groupTitle">Group A</div>
      <div class="listItem">Item 2</div>
      <div class="listItem">Item 3</div>
      <div class="listItem">Item 4</div>
    </div>
  </li>
  <li class="listItem">Item 5</li>
  <li class="listItem">Item 6</li>
  <li class="listItem groupItem">
    <div class="group">
      <div class="groupTitle">Group B</div>
      <div class="listItem">Item 7</div>
      <div class="listItem">Item 8</div>
    </div>
  </li>
  <li class="listItem">Item 9</li>

  </ul>
</div>

JS:

$( "#listContainer ul" ).sortable(
{
    connectWith: ".group",
  placeholder: "itemPlaceholder",
  cursor: 'move'
  }
);

$('.group').sortable({
    items: "> div.listItem",
  connectWith: ".srtable, .group",
  receive: function( event, ui ) {
    //alert('receive');
    //console.log(ui);
    //console.log(ui.item)
    //console.log($(ui.item).attr('class'))
    if ($(ui.item).hasClass('groupItem')) {
      $(ui.sender).sortable("cancel");
      alert('Sorry! Groups cannot be nested');
    }

  }
});